Total quantity for 2 values or more

  • Profile Image
    jotformhalalcateringsg
    Asked on August 04, 2012 at 10:02 PM

    Hi Jotform,

    I need a field to give the total amount of another 2 fields.

    E.g. field1 = 4 qty, field2 = 6 qty, 

    total will show 10 qty.

     

    I have checked grading tool, it does not provide what i need.

     

    Regards,
    Wendy 

  • Profile Image
    abajan
    Answered on August 04, 2012 at 10:16 PM

    Hi Wendy

    Is there a form in your account with such fields already in place? If so, please provide its name so that our team can examine it and provide solutions appropriate for that form.

    Thanks


    Wayne

  • Profile Image
    jotformhalalcateringsg
    Answered on August 04, 2012 at 10:25 PM

    Hi Wayne,

    You may look at http://www.jotform.com/?formID=21521271373445

    I need a field that is able to give the total quantity of bento ordered.

    say chicken briyani = 4, mutton briyani =6, Total = 10.

    Regards,

    Wendy 

  • Profile Image
    idarktech
    Answered on August 05, 2012 at 01:40 AM

    Hi Wendy,

    That's possible by injecting some javascript functions with your form's source code. To do that, please follow this steps:

    1. I have cloned your form and added a total field: http://form.jotform.me/form/22171146875455,  please clone this form back and then proceed below: 

    2. After cloning this form, get the form source code and paste it to notepad or any other text/html editing tool you have.

    3. On your form source code, look for the </style> end tag and paste this javascript code below it:

    <script type="text/javascript">

    function compute(){

    a = eval(document.getElementById("input_17").value)

    b = eval(document.getElementById("input_18").value)

    c = (a+b)

    document.getElementById("input_26").value = c

    if(isNaN(document.getElementById("input_26").value)) {

        document.getElementById("input_26").value = '0';//or a message of your choice

    };

    }

    See how it looks like here.

    4. Now to make the above code works, you have to insert onchange = compute() event to the input code of the two fields which are Chicken Briyani Bento  id="input_17" and Mutton Briyani Bento id="input_18". Just search for this highlighted field ID's on your form source code and append onchange = compute() next to it.

    Check this screen for a guide:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/8192_append_code.png

    --

    Also, to make your total field uneditable, simply paste this code at the bottom part of your form source code. After </form> tag.

    <script>document.getElementById("input_26").setAttribute("readonly", "readonly");</script>

    5. Embed your form source code or you may save it as html file.

    See it in action here: http://idarktech.com/test_calculation.html

    Hope this helps. Let us know if you require assistance with this. Thanks!

  • Profile Image
    Wendyyeo
    Answered on August 05, 2012 at 03:53 AM

    Hi,

    Thank you for the detailed instructions. I managed to insert the source codes up to step 4. Now, how do I embed my form source code ?

    Regards,
    Wendy

  • Profile Image
    abajan
    Answered on August 05, 2012 at 04:09 AM

    Hi again Wendy

    Select all of the code and copy it to your clipboard and paste it into the body (as opposed to the head) of a web page of your choice, in the position where you want the form to appear. Do you have a web page?


    Wayne

  • Profile Image
    abajan
    Answered on August 05, 2012 at 04:32 PM

    Wendy,

    If you wish the total to be updated not only when the arrows in the Chicken Briyani Bento and Mutton Briyani Bento boxes are clicked but also when the numbers are typed in via the keyboard, as will be necessary with some browsers, don't make any changes to the copy of the form's source obtained from the Embed Form Wizard. Just embed it as is and append this code to it, as you'll see in the source of this page.

    Also, there's an opinion by some JavaScript gurus that eval is evil. To be honest, I don't fully understand the reasoning behind this but to be on the safe side, you'll notice that I used a completely different script to arrive at basically the same functionality as that which my esteemed colleague has provided. The only thing is that my script (well, it's not really mine, as you'll see in the comments) uses a method that's apparently also frowned upon: setInterval! To further complicate matters (as though things aren't complicated enough!) extensive testing at BrowserStack.com has revealed, to my dismay, that neither solution works properly in some browsers.

    Anyway, do let us know if you have a website in which to embed the form's source because regardless of what we eventually come up with, that will certainly be a requirement.


    Wayne

  • Profile Image
    abajan
    Answered on August 05, 2012 at 06:15 PM

    Wendy,

    If using my solution, this shorter code can be substituted for the longer version. But there's still the browser issue to be dealt with. Further testing has shown it not to be as serious as I initially thought because upon submission the Total box is populated with the correct value and that value is displayed in both the form's notification and submission records. But if possible, the code should still be edited for consistency across browsers.



    Wayne

  • Profile Image
    abajan
    Answered on August 06, 2012 at 11:09 AM

    Wendy,

    In order for the Total box's value to become un-editable in Internet Explorer 8 and below, the code that's added to the bottom of the form's source needs to be changed. Please update it to this.


    Wayne