Copy link to clipboard
Copied
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.
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
...Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
osgood_
This is working perfectly in IE. However it does not total in Chrome, Firefox, or Edge.
I don't know why that is.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
The code, as written above, works as expected here in FF, Chrome and IE11 under W7.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
You mean something like this?
jQuery sum of radio fields - JSFiddle
Nancy
Copy link to clipboard
Copied
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.