Can I run tier selections please?

Hi

Maybe I re-phrase my question...

I hope to do sub-total in payment order.

eg:

1) Choose one room type:
   a) Single Room $100
   b) Twin Sharing Room $180
   c) Triple Room $300

Total $xxx

2) Choose if you want to add meal :
   a) all meals $100
   b) breakfast $20
   c) lunch only $20
   d) dinner only $20
   e) breakfast and dinner $40

Grand total : $xxx + $xx = $xxx

 

Unfortunately, this can't be done in the form builder. The form's full source would have to embedded in a web page and JavaScript added to achieve the functionality you want. I'll see if I can come up with something later.

Dear abajan, appreciate your help in this.. Really hope you can help us..

And so much later, abajan provides a solution! (My apologies).

Anyway, to see a form demonstrating the functionality you require, go to http://formdemos.awardspace.biz/formTemplate80.html. If you complete and submit it, you'll receive an auto-response containing the choices made and the total price. The submission records of the form show the same values, as shown in the following partial screenshot of some test submissions I ran earlier today:

(Click image to zoom)

Is this the sort of thing you were thinking of?

Yes, thank you.. How can I do that to my form? Thanks!

JavaScript is what makes this work. Without delving too deeply into technical stuff, I'll try my best to explain how it does this, linking to various resources along the way, to help clarify concepts that may seem somewhat nebulous or esoteric. I think that your having a basic understanding of how the script works should allow you to more easily apply the solution and perhaps variants of it to your own forms.

If you view the source of the page containing the demo, you'll see a bunch of code wrapped in script tags near the bottom (lines 200 to 224 - See the first screenshot below). It is that code which (for the most part) provides the functionality you experienced. That is the JavaScript to which I referred in my penultimate reply. (Within the embedded form's source are other scripts, either linked to from the page or that exist in the page itself, that were generated by the Jotform form builder but we are not concerned with those at the moment.)

The Script

(click images to zoom)

The type="text/javascript" attribute/value pair in the opening tag on line 198 tells the browser that the type of script contained within the script tags is JavaScript. In this instance, the entire script is a function that is called by the onchange event handlers in the radio button input tags which are triggered when an item is selected in either or both of the fields.

The Event Handlers

The following shows where all eight (8) event handlers in the demo page's source are located:

Their calling the function by its name (changeTotal) causes it to perform it's intended action. This can be loosely compared to calling someone by their name and they responding as a result.

What Action?

Let's look at the function more closely. As its name implies, it changes the total in the free text element's paragraph (in addition to the prices in the said paragraph). It also causes the total to be displayed in the form's submission records and in its email alerts.

How Does It Do That?

Lines 201 to 206 deal with the Choose room type field and consists of an IF statement within a FOR loop. Without going into too many details, when a button in the field is selected, this section of code searches the field for the one that was clicked, takes its value (this.value), strips it of all non-numeric characters and then divides it by 100. It needs to be divided by 100 because everything that's not a digit is stripped from the value by replace(/[^0-9]+/g, ""), even the decimal point. After all of that is done, the resulting figure is stored in the variable named roomPrice, replacing the "0" it was initially given on line 201.

Since the room price will be factored into the total, it is stored in a variable named total (line 215) and if the user of the form also selects a meal, it will be added to whatever the (numeric only, divided by 100) value of the selected meal is.

Lines 208 to 213 (See explanation of lines 201 to 206 above and apply it to the Choose if you want to add a meal field)

Line 218 replaces whatever content is enclosed by the HTML tag having an ID of roomPrice with the value stored in the roomPrice variable. The toFixed(2) part ensures that if the value ends in two zeros, it will still be displayed in it's entirety. For example, it ensures that a value of 100.00 will not be shown as 100.

Line 219 works in the same fashion, substituting mealPrice for roomPrice.

Line 220 Replaces whatever content exists within the HTML tags having an ID of total with what is stored in the total variable (that is, the sum of what is stored in the roomPrice and mealPrice variables - line 215).

Line 223 formats the total by placing a dollar sign before it and a space and "SGD" after it (the toFixed(2) part was already expained). That formatted total then becomes the value of the input element having an ID of input_12.

The lines in green are comments.

To more fully understand the above, clone the form embedded in the demo from its URL: https://www.jotform.com/form/20382508826, click the Preview button, click "Open in new tab". After the form appears in the new tab, return to the tab that has the form loaded in the Jotform form builder and follow along:

Perhaps one of the first things you will notice is a field labelled "TOTAL" which (as the info line under it states) doesn't appear on the form. However, its tag ({total}) does appear in both of the form's email alerts, as shown in the following screenshot of the autoresponder's "Compose Email" section:

(Clicking "TOTAL" in the Form Fields floating menu will insert additional instances of the tag)

This is the element that has the ID of input_12 and we'll get back to it shortly.

If you have the autoresponder or notification open, close it to return to the "Setup & Embed" tab. In addition to the aforementioned field is another element not seen on the form (at least, not when the form is first loaded and certainly not in that state). It is a free text (HTML) element and if you click it and then the "HTML" button in the form builder's toolbar, you'll see the code that renders it:

The arrows show the IDs referred to earlier in this post. We'll get back to this later but for now just click the blank white area to the right of the vertical dotted line that denotes the form's boundary. (This will both close the box and deselect the free text element.)

There's a condition containing two rules which hides this element unless a button is selected in at least one of the radio button fields. That's why it's not displayed when the form is initially loaded. The condition can be viewed by clicking "Conditions" ("Setup & Embed" tab) > Saved Conditions > click the condition:

Close the condition and click "Embed Form" (seen in the above screenshot) and when the wizard loads, click Source and copy the code provided. Create a new document in a text editor and paste the code into it. In that document, search for Choose room type which is part of the label of the first radio button field. Three lines down from the label is a div (division) having a class of form-single-column. Within that div are the three (3) radio button input tags of the "Choose room type" field. Each of those inputs is named q3_1Choose3. If Notepad++ is used for this exercise and you drag the mouse over q3_1Choose3, all instances of that string will become highlighted, as shown below:

Go back to the first screenshot in this reply and you'll see that the script also has instances of q3_1Choose3. The first occurrence is on line 202 but let's look at the first IF statement (lines 203 to 205) first. document.getElementsByName("q3_1Choose3") 

To be continued...