Highlighted

calculate totals on number fields

New Here ,
Oct 12, 2017

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

Views

389

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

calculate totals on number fields

New Here ,
Oct 12, 2017

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

Views

390

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 1
New Here ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
LEGEND ,
Oct 16, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
New Here ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
LEGEND ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
Adobe Community Professional ,
Oct 16, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
New Here ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
LEGEND ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
osgood_ LATEST
LEGEND ,
Oct 16, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

You mean something like this?

jQuery sum of radio fields - JSFiddle

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 1
New Here ,
Oct 16, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2017 0