Using jQuery to add values from 3 different types of form fields?

Question

I have a form with an input type text field, a select menu and a checkbox. Each form field stores a numerical value, depending on what the user enters, selects or checks.

Is it possible to use jQuery to add these three values and present the total in a fourth form field, in real time?

Here is my JSFiddle, which works if all of the fields are input type text, although I still can't get it to place the total value in the fourth form field:

jQuery

$('input').keyup(function(){ // run anytime the value changes

    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());

    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it

    var firstValueComplex = parseFloat($('#firstComplex').val()); // get value of field
    var secondValueComplex = parseFloat($('#secondComplex').val()); // convert it to a float
    var thirdValueComplex = parseFloat($('#thirdComplex').val());

    $('#addedComplex').html(firstValueComplex + secondValueComplex + thirdValueComplex); // add them and output it
});

HTML

<input id="second" value="0"></input><br />

<input id="third" value="0"></input><br />
<b>Total:<span id="added"></span></b><br />

<input id="firstComplex" value=""></input><br />

<select id="secondComplex">
    <option value="0" selected>0</option>
    <option value="15">15</option>
    <option value="30">30</option>
</select><br>

<input type="checkbox" id="thirdComplex" value="16"> Add Value<br>
<b>Total:<span id="addedComplex"></span></b>

<input id="total" value="<span id=addedComplex></span>"></input>

http://jsfiddle.net/nathonjones/c3n5vc8f/3/

Hope you can help, thank you. NJ

Why does your last input have this for the value value="<span id=addedComplex></span>"? And your second ("More Complex Form") form appears to work when you change the input. It also always add 16 from the checkbox regardless of whether it'c checked because you always ask to add it. — j08691
– j08691, Commented May 20, 2015 at 14:39
Because I'm trying to get the total to appear in a form field as opposed to just on the page. The "More Complex Form" doesn't work because it doesn't seem to add any of the select menu values and, as you've noticed, it always adds 16 for the checkbox value even if it isn't checked. PS. I'm new to this - please go easy on me (I did add JSFiddle at least!) Hope you can spot where I'm going wrong. — NathonJones
– NathonJones, Commented May 20, 2015 at 15:02

j08691 · Accepted Answer · 2015-05-21 01:04:28Z

You want to bind multiple events on multiple inputs, which can be done like this:

$(':input').on('change keyup check',function () { // run anytime the value changes
    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it

    var firstValueComplex = parseFloat($('#firstComplex').val()) || 0; // get value of field
    var secondValueComplex = parseFloat($('#secondComplex').val()); // convert it to a float
    var thirdValueComplex = $('#thirdComplex').is(':checked') ? parseFloat($('#thirdComplex').val()) : 0;

    $('#addedComplex').html(firstValueComplex + secondValueComplex + thirdValueComplex); // add them and output it
    $('#total').val(firstValueComplex + secondValueComplex + thirdValueComplex)
});

jsFiddle example

Also note how the checkbox is added in with a ternary operator:

var thirdValueComplex = $('#thirdComplex').is(':checked') ? parseFloat($('#thirdComplex').val()) : 0;

Collectives™ on Stack Overflow

Using jQuery to add values from 3 different types of form fields?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related