What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Customized Order Form to calculate total sum

    Asked by Wendyyeo on October 25, 2012 at 09:52 PM

    Hi Jotform,

    How can I get it to calculate the total sum accordingly?

     

    For example, if customer orders 5 quantity of Product A and all the accessories, then the total sum would be as follow, including $30 complusory freight charges.

    5* ($200 + $5 + $2 + $1) + $30

     

    Regards,
    Wendy 

    Page URL:
    http://www.jotform.me/?formID=22988483880471

    order form customized JotForm quantity product calculation calculate JavaScript script dropdown radio buttons checkboxes check boxes
  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 11:14 PM

    Hi there!

    Unfortunately this is not possible to do with the form builder at this time.

    However, you can set up products and have our third party payment gateways do the calculations as you have described.

    Please give them a try and let us know if you need further assistance!

  • Profile Image

    Answered by Wendyyeo on October 25, 2012 at 11:19 PM

    Hi Jotform,

    I can't seem to us the payment tools, as it only allow either radio button of checkbox for the product range.

    For this case, I need both, for the product itself and also the accessories. 

    1. Payment tools does not allow me to use it twice.

    2. It does not allow me to add surcharges like freight charges.

     

    Regards,
    Wendy 

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 11:50 PM

    Take a look at this form.

    http://form.jotform.co/form/22774494149868?

    Do you think something like this can work in your case?

    Please let us know and we would be glad to assist you!

  • Profile Image

    Answered by Wendyyeo on October 26, 2012 at 12:19 AM

    Nope.

    1. I need radio button for the pdt itself.

    2. There is no need to specify quantity at every step, as they will be the same. Just one field for quantity will do.

    3. The frieght charge is standard flat rate. In fact, this field can be omitted, as long as the total sum takes care of it in the calculation.

    I want something clean, similar to what i had here.  http://www.jotform.me/?formID=22988483880471 

    An example for the formula is

    Qty* (pdt cost  + accessories cost) + $30

     

    Thanks for the help.

    Regards,

    Wendy

  • Profile Image
    JotForm Support

    Answered by idarktech on October 26, 2012 at 02:45 AM

    Hi Wendy,

    This is possible using your form source code and apply a custom script to create calculation function. I or my other colleague's who are good on javascript can help you with this but we can't promise anything. 

    Just stay tuned for possible updates. Thanks!

  • Profile Image

    Answered by Wendyyeo on October 26, 2012 at 04:50 AM

    Hi,

    Thanks a lot!

    I will look up to your updates!

    Regards,
    Wendy 

     

  • Profile Image
    JotForm Support

    Answered by abajan on October 26, 2012 at 06:56 AM

    Hi Wendy

    I'll give this a go (as I'm sure some of my colleagues will) but I just need clarification on something. When you state that a radio button is needed for each product, do you mean that users should be able to choose only one of the products per submission? Because, that's how radio button fields work: Their selections are mutually exclusive, as opposed to check box fields which allow any number of items to be chosen.

    I'm asking about this because it should be possible to allow both products to be purchased:

    Calculation_1 = Qty_pdtA * (pdtA_cost + accessories_cost)
    Calculation_2 = Qty_pdtB * (pdtB_cost + accessories_cost)
    Subtotal = Calculation_1 + Calculation_2
    Total = Calculation_1 + Calculation_2 + $30

    We look forward to your reply.


    Wayne

  • Profile Image

    Answered by Wendyyeo on October 26, 2012 at 11:20 AM

    Hi,

    Yes, For this set of products, I do want the selection to be exclusive, either A or B.

    (But I also intend to implement Another Form for products, that allow any number of items to be chosen).

    So, it would be good to know how to implement for both cases.

    Regards,
    Wendy 

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 26, 2012 at 03:35 PM

    Hi there,

    My colleague's will be in contact as soon as they have a workaround for you!

    Thanks for your patience!

  • Profile Image
    JotForm Support

    Answered by abajan on October 30, 2012 at 03:25 PM

    Hi again Wendy

    First, my apologies for taking so long to get back to you but what initially looked like it would be a fairly simple matter turned out to be anything but! Nevertheless, it appears that everything is now coming together nicely and I should have that solution for you sometime later today or tonight (knock wood!).


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on October 30, 2012 at 11:16 PM

    Wendy,

    Please have a look at the demo on this page and let us know if it's the sort of functionality you require for the form whose product selections are exclusive. I should be able to provide the demo for the other form (which would allow multiple product selections) sometime tomorrow.

    Both solutions require the form's source be embedded into a web page and a script to be added to the said page. Even though the script for the demo's form may look somewhat complicated, it was written in manner that would allow you to customize it with minimal effort. It can be used with a form containing as large a product and accessory range as you wish. Also, the script is quite capable of handling large quantities of products (without any slow down in performance once the form has loaded). In other words, the Quantity selector is not limited to 10. It can be 100, 1,000 or even 10,000 if you like!

    After providing the second demo, I'll walk you through what changes would need to be made to each script to customize it for each form to which it is to be applied.

    Looking forward to hearing from you.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on October 31, 2012 at 08:51 AM

    Hi Wendy,

    Here's the multiple product selection version of the above demo. (If the scripts at the bottom of the demos are carefully examined and compared, you'll see where they differ.) However, for this second form, I'm not sure if this is the type of functionality you want because upon checking your account, I noticed various types of order forms. Depending on your requirements, it's quite possible that, with the help of some injected CSS, use of the source code would be unnecessary and the form builder's purchase order tool would be sufficient to achieve your goal. To which form specifically were you referring? (Once you provide its name or ID, our support team find it.)

    We'll await your reply.


    Wayne

  • Profile Image

    Answered by Wendyyeo on November 01, 2012 at 02:56 AM

    Hi Wayne,

    Thank you so much! The demo for exclusive pdt selection is wonderful!(http://formdemos.awardspace.biz/form_22992672108964.html). It just fit into my needs.

    Please show me how to get it implemented.

    Regards,
    Wendy 

  • Profile Image
    JotForm Support

    Answered by abajan on November 02, 2012 at 03:38 AM

    Hi Wendy

    Glad you liked the solution. Perhaps the best way to explain how to use the script with any of your forms would be to show how it works in the demo. If you view the source of that page, you'll see the form's code in the upper portion and the script under it, right at the bottom, just before the page's closing body and html tags. Ideally, this is where the script should go. However, there may be occasions when it's not possible to put it there. What is important is that the script follow the form's code and not precede it. This means that if the script were to be placed in the page's head, it would not work. (You may have noticed that part of the form's code has been inserted into the page's head while the remainder is in the body. That's just the way I normally setup demos and it has no bearing on the script's functionality. When you copy your form's code, you can just embed all of it into the body of the web page, in the position where it is to appear.)

    Now, how does it work? See these five lines near the top of the script? Those are the only lines of he script that should be edited, assuming that it will only be used with forms containing fields similar to those in the demo. The fields can be placed in any order and as stated earlier, the form can contain any number of products and accessories, and the Quantity selector is not limited to 10.

    Getting back to the five lines, let's examine the first one:

    var products = document.getElementsByName("q5_product"),

    Translated to English, it basically states: "Declare a variable named products and point it to all of the elements named q5_product." If you search the page's source, you'll see two instances of the attribute name="q5_product", both contained in the input tags of the Product field. Had there been additional products in that field, their input tags would all contain the attribute name="q5_product" too.

    Now, let's look at the second line:

    dropdown = document.getElementById("input_8"),

    Translated to English: "Declare a variable named dropdown and point it to the element whose ID is input_8."

    In this instance, the page's source contains just one element with the attribute id="input_8" and it's the select tag of the Quantity dropdown menu.

    Now, look at the third line:

    extras = document.getElementsByName("q6_optionalAccessories[]"),

    This is basically saying: "Declare a variable named extras and point it to all of the elements named q6_optionalAccessories[]." You'll see that the page's source contains three instances of the attribute name="q6_optionalAccessories[]" and they are all in the input tags of the Optional Accessories field.

    Next, we examine the fourth line:

    freight = 30,

    There's nothing in the page's source which contains anything here. The line simply assigns the total value of freight charges to a variable named freight.

    Now for the last line:

    total = document.getElementById("input_7");

    Translated, this states: "Declare a variable named total and point it to the element whose ID is input_7." You've probably already figured out that just a single instance of the attribute id="input_7" will be found in the page's source and that it's located in the input tag of the Total field.

    So, why was it necessary for you to know all of this? Well, when you apply the script to one of your own forms, you will need to edit all of the values within the quotation marks of four of those lines to match the names and IDs of the respective fields in your forms and you'll know where to edit the total freight charge. Incidentally, if the freight charge contains pennies, you can assign the entire value, including the decimal point but not the "$" symbol, to the variable. For example,
    freight = 37.95,

    Although the source of each of your forms can be searched directly to find out the the respective names and IDs which should be used, tools like Firebug would help to expedite the process. Also, many browsers come bundled with developer tools. For instance, in Chrome, right-clicking an input (as opposed to its label) and then clicking Inspect element reveals the element's name and ID, as illustrated here. Just remember which of the script's lines are to have the name and which use the ID. Where you see getElementsByName, use the value of the name attribute and for the ones with getElementById, use the value of the id attribute. I've color coded them below (green for name and red for ID) to help you:

    var products = document.getElementsByName("q9_products[]"),
    dropdown = document.getElementById("input_8"),
    extras = document.getElementsByName("q6_optionalAccessories[]"),
    freight = 30,
    total = document.getElementById("input_7");

    That's about it. If you would like clarification on anything, please let us know.


    Wayne

  • Profile Image

    Answered by Wendyyeo on November 05, 2012 at 08:38 PM

    Hi Wayne,

    Thank you so much for the detailed steps and explanation. These are very helpful and I have managed to get it implemented! This is so great!

    Just one minor request. Is it possible to allow user to enter the order quantity, instead of the drop-down selection?

    Regards,
    Wendy 

    NB: I am still evaluating the multi-product selection version.

  • Profile Image
    JotForm Support

    Answered by abajan on November 06, 2012 at 05:48 AM

    Hi Wendy

    Yes, that should be possible. I'll see if I can provide the solution later today.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on November 06, 2012 at 02:26 PM

    Hi again Wendy,

    Here's the text box version of the demo. In this form's script, the variable for the text box is name named howMany. So, within the quotes on that line, you would substitute the ID of your form's text box for input_8.

    It's nice to know you were able to make use of my last solution. Hopefully, this one will be just as helpful. However, should you encounter any issues or need clarification on anything, please let us know.


    Wayne

  • Profile Image

    Answered by Wendyyeo on November 10, 2012 at 09:03 PM

    Hi Wayne,

    Thank You so much!

    I forget to mention that there is a minimum quanity of 5 for each order. Where should I insert this validation?

    Sorry for missing out this requirement.

    Regards,
    Wendy 

  • Profile Image
    JotForm Support

    Answered by abajan on November 10, 2012 at 09:12 PM

    Hi Wendy,

    I'll see what alterations I can do to the script and get back to you either tonight or tomorrow (Barbados time).


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on November 11, 2012 at 04:03 PM

    Hi again Wendy,

    Here's a demo having the functionality you requested. For this to work with your form, please do the following:

    1. Inject the following CSS, substituting the ID of the div (division) that contains your form's submit button for id_2, if necessary:

    #id_2 {
    display: none;
    }

    2. After embedding the form and this updated script into your web page, edit only these lines near the top of the script, as follows (sections to edit are highlighted in red):

    Line 6: submitDiv = document.getElementById("id_2");

     Only if the ID of the div containing the submit button is not id_2 would you need to edit this line. In most cases it will be id_2 because when creating a form in the form builder, the submit button is automatically inserted as the second element

    Line 9: if (howMany.value < 5) {

     This line checks if the number entered in the Quantity box is less than five (5). If you wish to change the amount below which a user may not order, change 5 to that number.

    Line 11: alert("Please enter a quantity of five (5) or more.");

    The text between the quotes is that which is displayed in the popup when a quantity less than the allowed minimum is entered. You may edit the message as you wish.

    (I placed comments on the relevant lines as guides.)

    From my reply on November 2, you would already know how to edit the first five lines. However, if you need further assistance with this, please let us know.

    Thanks.


    Wayne

  • Profile Image

    Answered by guest_23147440569052 on November 13, 2012 at 03:44 AM

    Hi Wayne,

    It works, thank you!

    Regards,
    Wendy 

  • Profile Image

    Answered by Seastride on October 01, 2014 at 10:45 AM

    abajan, was anyone ever able to create a widget or template that makes the configuration of the script more user friendly? Thank you for any feedback!

  • Profile Image
    JotForm Support

    Answered by david on October 01, 2014 at 12:42 PM

    Hi,

    This thread is quite old and Abajan no longer does support for JotForm.  The script in this thread is quite a custom workaround and I do not believe it has been revised.  Making a widget for it is not possible due to the interaction with a webpage outside the form.

    If there is something specific your are trying to accomplish however, create a new thread and we will be happy to help you with whatever we can.