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=""`? 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, May 20 '15 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, May 20 '15 at 15:02
Is that what you're after http://jsfiddle.net/j08691/c3n5vc8f/5/? — j08691, May 20 '15 at 15:17

score 1 · Accepted Answer · answered May 21 '15 at 01:04

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;

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

1 Answers1