Skip to main content
J
joshw50886526
Participating Frequently
October 12, 2017
Answered

calculate totals on number fields

  • October 12, 2017
  • 2 replies
  • 990 views

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.

    This topic has been closed for replies.
    Correct answer osgood_

    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>

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 12, 2017

    You mean something like this?

    jQuery sum of radio fields - JSFiddle

    Nancy

    Nancy O'Shea— Product User & Community Expert
    J
    joshw50886526Author
    Participating Frequently
    October 16, 2017

    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.

    O
    osgood_
    Legend
    October 12, 2017

    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>

    J
    joshw50886526Author
    Participating Frequently
    October 16, 2017

    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.

    O
    osgood_Correct answer
    Legend
    October 16, 2017

    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>

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices