I wanna make form in which I have 7 input fields in which I'm entering numbers and one last input fields where all inserted numbers are summed in one result. I've tried to edit some script from other stacker but from some reason it doesn't display the result.

the html is:

<form class="form-horizontal" id="whereEntry" method='post' action=''>
   <fieldset>
    <input type="text" class="ine_count span1 register_input" id="ine" name="ine" placeholder="% of ine"> <br>
    <input type="text" class="ine_count span1 register_input" id="ine_2" name="ine_2" placeholder="% of ine"> <br>
<input type="text" class="ine_count span1 register_input" id="ine_3" name="ine_3" placeholder="% of ine"> <br>
<input type="text" class="ine_count span1 register_input" id="ine_4" name="ine_4" placeholder="% of ine"> <br>
    <input type="text" class="ine_count span1 register_input" id="ine_5" name="ine_5" placeholder="% of ine"> <br>
        <input type="text" class="ine_count span1 register_input" id="ine_6" name="ine_6" placeholder="% of ine"> <br><br><br>

   <input type="text" class="span2 register_input" id="ine_sum" name="ine_sum" placeholder="% of ine"> <br>
       </fieldset>
       </form>

and my script so far looks like this:

var $form = $('#whereEntry'),
$summands = $form.find('.ine_count'),
$sumDisplay = $('#ine_sum');

$form.delegate('.ine_count', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.text(sum);
});

here is jsfiddle of it: /

could you help me? is the problem in my html classes or something in the script I'm nooby about jQuery and i need as ASAP solution.. update of my js fiddle would be great

I wanna make form in which I have 7 input fields in which I'm entering numbers and one last input fields where all inserted numbers are summed in one result. I've tried to edit some script from other stacker but from some reason it doesn't display the result.

the html is:

<form class="form-horizontal" id="whereEntry" method='post' action=''>
   <fieldset>
    <input type="text" class="ine_count span1 register_input" id="ine" name="ine" placeholder="% of ine"> <br>
    <input type="text" class="ine_count span1 register_input" id="ine_2" name="ine_2" placeholder="% of ine"> <br>
<input type="text" class="ine_count span1 register_input" id="ine_3" name="ine_3" placeholder="% of ine"> <br>
<input type="text" class="ine_count span1 register_input" id="ine_4" name="ine_4" placeholder="% of ine"> <br>
    <input type="text" class="ine_count span1 register_input" id="ine_5" name="ine_5" placeholder="% of ine"> <br>
        <input type="text" class="ine_count span1 register_input" id="ine_6" name="ine_6" placeholder="% of ine"> <br><br><br>

   <input type="text" class="span2 register_input" id="ine_sum" name="ine_sum" placeholder="% of ine"> <br>
       </fieldset>
       </form>

and my script so far looks like this:

var $form = $('#whereEntry'),
$summands = $form.find('.ine_count'),
$sumDisplay = $('#ine_sum');

$form.delegate('.ine_count', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.text(sum);
});

here is jsfiddle of it: http://jsfiddle/bT4nm/1/

could you help me? is the problem in my html classes or something in the script I'm nooby about jQuery and i need as ASAP solution.. update of my js fiddle would be great

• javascript
• jquery
• html
• input
• sum

• Once you get the numbers summing up correctly, you might have difficulty getting the total to display with the correct format (thousand separators, decimals places, currency symbol, etc). See this answer for help with that: stackoverflow./questions/2901102/… – cssyphus Commented Feb 7, 2015 at 4:48

2 Answers 2

do

$sumDisplay.val(sum);

instead of

   $sumDisplay.text(sum);

WORKING DEMO

Use this:

var $form = $('#whereEntry'),
$summands = $form.find('.ine_count'),
$sumDisplay = $('#ine_sum');

$form.delegate('.ine_count', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.val(sum);
});