How can I sum serveral numeric fields and post the results in a hidden field?

  • Profile Image
    Asked on March 03, 2012 at 03:12 PM

    I have a number of numeric fields I would like to sum right before the form is submitted. The current crude code looks like this:

                    (assuming a paramter named "form" in the function declaration)

                    var intSumCosts = 0;
                    intSumCosts += form.q76_electric.value;
                    intSumCosts += form.q79_studentLoans.value;
                    intSumCosts += form.eq82_food.value.value;
                    intSumCosts += form.q85_cable.value.value;
                    intSumCosts += form.q87_publicTransportation.value;
                    intSumCosts += form.q89_childcare.value;
                    intSumCosts += form.q91_prescriptions.value;
                    intSumCosts += form.q93_medicalExpenses.value;
                    intSumCosts += form.q77_naturalGas.value;
                    intSumCosts += form.q80_rent.value;
                    intSumCosts += form.q83_water.value;
                    intSumCosts += form.q86_healthInsurance.value;
                    intSumCosts += form.q88_autoInsurance.value;
                    intSumCosts += form.q90_lifeInsurance.value;
                    intSumCosts += form.q92_church.value;
                    intSumCosts += form.q94_schoolExpenses.value;
                    intSumCosts += form.q78_telephone.value;
                    intSumCosts += form.q81_gasoline.value;
                    intSumCosts += form.q84_trashPickup.value;

                    form.q105_105.value = intSumCosts;

    First of all, am I reference the form fields properly? And where in my local copy of jotform.js should I put this code block?



  • Profile Image
    Answered on March 03, 2012 at 04:06 PM



    Hi Scott


    I was able to enter custom html and javascript to my form by doing the following

    1.log into my jotform account and select My Forms.

    2.locate the form I need and select to the option to edit

    3.The form edit menu appears to the left from the list of options I selected Power Tools.

    4.From the Power Tool Menu I selected Free Text (HTML).

    5.The option to Edit HTMl appears to the left below the last form element . I selected edit HTML.

    6.A HTML editor will appear from the bottom left click on the html this will give you the option to edit source code you can enter your javascript.


    I hope you find this information helpful.



  • Profile Image
    Answered on March 03, 2012 at 09:40 PM


    I'm no JavaScript expert but so far I've noticed a number of errors in your script above:

    Line 5: eq82_food.value.value;
    should be q82_food.value;

    Line 6: q85_cable.value.value;
    should be q85_cable.value;

    Last line: q105_105.value
    should be q105_sumOf105.value

    I'll proceed to test with corrections and see if the hidden field is populated with sum of the entries in the relevant text boxes and get back to you.

  • Profile Image
    Answered on March 03, 2012 at 11:00 PM

    I've found a solution to this. Just trying to tidy up the formatting of the total. Be back shortly...

  • Profile Image
    Answered on March 04, 2012 at 01:38 AM

    Here's what to do:

    1. Load the form into the form builder and while on the Setup & Embed tab, click Embed Form

    2. When the Embed Form Wizard loads, click the Source button and download the compressed and refined version:

    3. Unzip the file into a folder of your choice on your computer

    4. Open the HTML file in a text editor like Notepad or Notepad++. (Do NOT use a word processor like Word or WordPerfect for this purpose. Otherwise, unwanted formatting may be applied to your code.)

    5. From lines 31 to 40, just before the closing head tag, you'll see five calls to external scripts plus an internal one. Insert the line indicated in the following screenshot:

    (Click image to zoom)

    6. Create a new file named addEmUp.js in the js folder and paste the following code into it:

    (Click image to go to the actual code so that you can easily copy it)

    Do NOT place JavaScript tags in that document! Just paste the above code and save the file.

    7. In the opening form tag of the HTML document, change the action attribute's value from submit.php to
    (replace the string of digits with your actual form ID)

    8. On that same line, within the form tag, include the following event handler:

    9. Save the changes and upload all of the contents of the unzipped folder (the css folder and its contents, the js folder and its contents and the HTML file) to your website, maintaining the hierarchy:

    That's about it. If you need clarification on anything or if the solution isn't working, please let us know.

  • Profile Image
    Scott Quinby
    Answered on March 05, 2012 at 12:47 AM

    Abajan -

    I cannot thank you enough for your solution. It worked perfectly. I'm amazed that you invested the time and effort to assist me. Please know that you efforts went to a charitable cause.

    Thanks again.

    Scott Quinby

    on behalf of

  • Profile Image
    Answered on March 05, 2012 at 07:43 AM

    Glad to help, Scott.