Advanced Multi-Stage Form

The scenario is having 4 step form, and in the last step the price calculated
This is done with slideshow, and each step of the form is a slide .
each field(dropdown) has in its value, the ammount of charge for the specific service.

e.g. in the first field, the dropdown has theese 2 options:

  • in the label “YES” and in the value “100” .

  • in the label “NO” and in the value “0” .
    in the above example, if the client wanted the service he would click YES , so the value would be 100 .
    What i want to do is basicly add all the “YES” labels(100 values), and calculate the total cost.

My problem is that in the code i wrote, there is a problem at the final value.
Instead of mathematic addition, it does string addition…
e.g if 3 services were selected:
100100100
instead of
300

var total = 1;

Slide 1 - Project Information

export function P1toP2_onClick() {
	$w('#slideshow1').changeSlide(1);
	total = $w('#contentwriter').value + $w('#pages').value;
}

Slide 2 - Features

export function P2toP3_onClick() {
	$w('#slideshow1').changeSlide(2);
	total = total + $w('#eshop').value + $w('#hotel').value + $w('#services').value + $w('#donations').value + $w('#food').value + $w('#reservations').value + $w('#blog').value + $w('#forum').value ;
}

Slide 3 - Extras

export function P3toP4_onClick() {
	$w('#slideshow1').changeSlide(3);
	total = total + $w('#printing').value + $w('#seo').value + $w('#logo').value;
}

Slide 4 - Client Info


#c13 is the “Total Price” text shown in the next slide on the bottom.

export function getmyquote_onClick() {
	$w('#slideshow1').changeSlide(4);
	$w('#c13').text = total;
}

Slide 5 - Done

Also another problem that i encountered is this :


What i want is to display the “Select Plan”(#plan) dropdown only when the "Do you need a Marketing Consultant)(marketing) is “YES”(which YES has a value of 80).
I have the “Select Plan” hidden on load.
Code runs, without errors, but when i select YES, it does not show the Select plan.

$w.onReady(function () {
	$w('#marketing').onChange(() => {
		if ($w('#marketing').value === '80') {
			$w('#plan').show;
		} else {
			$w('#plan').hide;
		}
	});
});

Hi Maria,

Your form looks amazing! :slight_smile:

Regarding the issues:

  1. Values from radio buttons are of type text. All you need to do is convert them to number by using the Javascript " parseInt " function, for example:
parseInt($w('#printing').value)
  1. The show and hide issue - these are functions, meaning you need to call them using parentheses.
    You can see examples in the documentation:
    https://www.wix.com/code/reference/$w.RadioButtonGroup.html#show

Hello Tomer,
Thank you so much! :slight_smile:
Now it works great!
I will now go to the final step, which is transfering all the data from the previous pages to the final one!


Is there a way to get the label from the dropdown, instead of the value?
Because for example on “Content Writer”,above, i will need a NO/YES text, not a 80/0 text…
i though of something like

if $w("#content").value = 80 then contentyn = "YES" else contentyn = "NO"

but it would be much easier if there was a content.label or something, it would just be

contentyn = $w("content").label

i searched the API but i didnt find a way to get the label…

You can try using the options API:

Okay i managed to make it work!!
My last problem, is that i want the information on the last page sumbited to my database.


When the accept is clicked, i want the info to be saved to the database.
I did that by connecting the text fields to their place in the database


I did that for all the texts.


2 Problems:

The format of the fields works perfectly without the dataset and the connections to the database. But when i connect the texts to the database, this happens :


Formating is messed up.But if i delete the dataset(and the connections are broken) everything is ok.

Last problem is that it doesnt actually transferes anything to the database.


Only empty rows.

The screenshot you posted is for the live database, meaning data from your live published site.
Can you try using the form in the editor and see if the data was submitted (open the collection in the editor for that)?