11 Replies Latest reply on Oct 16, 2017 1:33 PM by osgood_

    calculate totals on number fields

    joshw50886526 Level 1

      How can I populate the total of 4 number fields in a form but only the first of the number fields is required.

       

      The other three number fields are optional.

        • 1. Re: calculate totals on number fields
          osgood_ Level 8

          Do you mean 'calculate' not 'populate" - example below:

           

           

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>Calculate Form Fields</title>

          <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

          <script>

          $(document).ready(function(){

          $('.submit').css('cursor' , 'pointer').click(function(){

          var field_1 = $('.field_1').val();

          $(".field_1").val(field_1);

          // Check field_1 is not empty

          if(field_1 === "") {

          alert("Please fill in field 1");

          }

          // Get value of field_2

          var field_2 = $('.field_2').val();

          $('.field_2').val(field_2);

          // Get value of field_3

          var field_3 = $('.field_3').val();

          $('.field_3').val(field_3);

          // Get value of field_4

          var field_4 = $('.field_4').val();

          $('.field_4').val(field_4);

          // Calculate total

          var total = +field_1 + +field_2 + +field_3 + +field_4;

          $('.total span').text(total);

          });

          // Clear fields and total

          $('.clear').css('cursor' , 'pointer').click(function(){

          $(".field_1, .field_2, .field_3, .field_4").val("");

          $(".total span").text("0");

          });

          });

          </script>

          </head>

          <body>

          <p>

          <label for="field_1">Field 1</label>

          <input type="text" name="field_1" id="field_1" class="field_1">

          </p>

           

          <p>

          <label for="field_2">Field 2</label>

          <input type="text" name="field_2" id="field_2" class="field_2">

          </p>

           

          <p>

          <label for="field_3">Field 3</label>

          <input type="text" name="field_3" id="field_3" class="field_3">

          </p>

           

          <p>

          <label for="field_4">Field 4</label>

          <input type="text" name="field_4" id="field_4" class="field_4">

          </p>

          <p>

          <input type="submit" name="submit" class="submit" value="Calculate"><input type="submit" name="submit" class="clear" value="Clear">

          </p>

          <div class="total">Total <span>0</span></div>

          </body>

          </html>

          1 person found this helpful
          • 2. Re: calculate totals on number fields
            Nancy OShea Adobe Community Professional & MVP

            You mean something like this?

            jQuery sum of radio fields - JSFiddle

             

             

            Nancy

            1 person found this helpful
            • 3. Re: calculate totals on number fields
              joshw50886526 Level 1

              osgood_

               

              Thank you for the example.  Yes this is what I am looking for. 

               

              One difference is I wish the total would calculate without having to click a button.  Is it possible to have it calculate once the user clicks or tabs out of a field?  Is this on-blur?'

               

              thanks.

              • 4. Re: calculate totals on number fields
                joshw50886526 Level 1

                Nancy

                 

                Yes I like how this calculates on blur but I need them to be text fields that the user types into.  Therefore I cannot assign the text fields an arbitrary number but instead it is user input.

                 

                thanks for answering.

                • 5. Re: calculate totals on number fields
                  osgood_ Level 8

                  joshw50886526  wrote

                   

                   

                  One difference is I wish the total would calculate without having to click a button.  Is it possible to have it calculate once the user clicks or tabs out of a field?  Is this on-blur?'

                   

                   

                   

                  Yes, you would use the jquery blur function instead of the click function, as the example code below shows: (I've streamed lined the jquery code a bit so you can add as many 'fields' or as little as needed without having to add them to the jquery code.

                   

                  So if you require extra fields just assign the next sequential number to the form field:

                  <input type="text" name="field_5" id="field_5" class="field field_5">

                   

                   

                  <!DOCTYPE html>

                  <html>

                  <head>

                  <meta charset="UTF-8">

                  <title>Calculate Form Fields</title>

                  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

                  <script>

                  $(document).ready(function(){

                  $('.field').blur(function(){

                  var field_1 = $('.field_1').val();

                  $(".field_1").val(field_1);

                  // Check field_1 is not empty

                  if(field_1 === "") {

                  alert("Please fill in field 1");

                  }

                  var count_fields = $('.field').length;

                  var i = 1;

                  total = 0;

                  // Loop through fields

                  while(i <= count_fields) {

                  sub_total = $('.field_' + i).val();

                  total = +total + +sub_total;

                  $('.field_' + i).val(sub_total);

                  i++;

                  }

                  // Write total to page

                  $('.total span').text(total);

                  });

                  // Clear fields

                  $('.clear').css('cursor' , 'pointer').click(function(){

                  var count_fields = $('.field').length;

                  var i = 1;

                  while(i <= count_fields) {

                  $('.field_' + i).val("");

                  i++;

                  }

                  $(".total span").text("0");

                  });

                  });

                  </script>

                  </head>

                  <body>

                  <p>

                  <label for="field_1">Field 1</label>

                  <input type="text" name="field_1" id="field_1" class="field field_1">

                  </p>

                   

                  <p>

                  <label for="field_2">Field 2</label>

                  <input type="text" name="field_2" id="field_2" class="field field_2">

                  </p>

                   

                  <p>

                  <label for="field_3">Field 3</label>

                  <input type="text" name="field_3" id="field_3" class="field field_3">

                  </p>

                   

                  <p>

                  <label for="field_4">Field 4</label>

                  <input type="text" name="field_4" id="field_4" class="field field_4">

                  </p>

                  <p>

                  <input type="submit" name="submit" class="clear" value="Clear">

                  </p>

                  <div class="total">Total <span>0</span></div>

                  </body>

                  </html>

                  • 6. Re: calculate totals on number fields
                    joshw50886526 Level 1

                    osgood_

                     

                    This is working perfectly in IE.  However it does not total in Chrome, Firefox, or Edge.

                     

                    I don't know why that is.

                    • 7. Re: calculate totals on number fields
                      osgood_ Level 8

                      joshw50886526  wrote

                       

                      osgood_

                       

                      This is working perfectly in IE.  However it does not total in Chrome, Firefox, or Edge.

                       

                       

                      Works for me in Chrome and Firefox, don't know about Edge as I don't check that.

                       

                      Maybe someone else can confirm it works in Chrome and Firefox, I can't see why it wouldn't.

                      • 8. Re: calculate totals on number fields
                        Jon Fritz II Adobe Community Professional & MVP

                        The code, as written above, works as expected here in FF, Chrome and IE11 under W7.

                        • 9. Re: calculate totals on number fields
                          joshw50886526 Level 1

                          Sorry I hosted your example on https site and those browsers were not enabling that jquery unless explicitly clicking and allowing it in the upper right corner of the address bar.

                           

                          I hosted the jquery file on the same https server and link to it there and now the protection warning is not showing.

                           

                          Works in all browser as you stated.  Thank you very much osgood_ and company.

                          • 10. Re: calculate totals on number fields
                            osgood_ Level 8

                            https://forums.adobe.com/people/Jon+Fritz+II  wrote

                             

                            The code, as written above, works as expected here in FF, Chrome and IE11 under W7.

                             

                            Thanks for confirming Jon.

                            • 11. Re: calculate totals on number fields
                              osgood_ Level 8

                              joshw50886526  wrote

                               

                              Sorry I hosted your example on https site and those browsers were not enabling that jquery unless explicitly clicking and allowing it in the upper right corner of the address bar.

                               

                              I hosted the jquery file on the same https server and link to it there and now the protection warning is not showing.

                               

                              Works in all browser as you stated.  Thank you very much osgood_ and company.

                               

                              I should have probably provided you with the jquery https link, which is  a more up-to-date version or the library:

                               

                              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>