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

# calculate totals on number fields

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

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

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<title>Calculate Form Fields</title>

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

<script>

\$('.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 === "") {

}

// 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>

<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>

• ###### 2. Re: calculate totals on number fields

You mean something like this?

jQuery sum of radio fields - JSFiddle

Nancy

• ###### 3. Re: calculate totals on number fields

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

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.

• ###### 5. Re: calculate totals on number fields

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>

<meta charset="UTF-8">

<title>Calculate Form Fields</title>

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

<script>

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

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

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

// Check field_1 is not empty

if(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>

<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

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

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

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

• ###### 9. Re: calculate totals on number fields

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

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

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>`