CODEWITHSUNDEEP
javascriptjquerydynamicinputsum
dzordz
dzordz

Reputation: 2317

jquery calculation and sum of dynamic input fields

I've made a form with dynamic input fields, for insert of numbers, where first input is static and other 5 are dynamically made with script. Now, I wanna to sum all inserted numbers into 7th input id-ed #income_sum. Everything works great with static input fields, I've checked on two fields and it works, also, it works with that one static field in my example. But my problem is, when I enter a number in one of dynamic fields it doesn't sums in #income_sum, and they are given class .income_count as in that one static field.

here is my html:

<form class="form-horizontal" id="whereEntry" method='post' action=''>
   <fieldset>

      <div class="control-group">
        <div class="controls controls-row">
            <input type="text" class="span3 register_input" id="main_activity" name="main_activity" placeholder="Company's main activity">
              <input type="text" class="span1 register_input income_count" id="income" name="income" placeholder="% of income">
               </div>
                </div>

<div class="control-group">
<div class="controls controls-row">
    <div id="InputsIncomeWrapper">
    </div>
</div>
<div class="row">
    <input type="text" class="span1 register_input pull-right" id="income_sum" name="income_sum">
</div>
<div class="row">
    <a href="#" id="AddMoreIncomeBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</a>
</div>
</div>

       </fieldset>
       </form>

calculation script:

//calculation script
var $form = $('#whereEntry'),
$summands = $form.find('.income_count'),
$sumDisplay = $('#income_sum');

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

$sumDisplay.val(sum);
});

dynamic field script:

//add dynamic field script
$(document).ready(function() {

var MaxInputs       = 5; //maximum input boxes allowed
var InputsWrapper   = $("#InputsIncomeWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreIncomeBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('\
        <div>\
        <input type="text" class="register_input span3"\
        name="main_activity_'+ FieldCount +'" id="main_activity_'+ FieldCount +'"\
        placeholder="Company´s other activity" style="margin:0px 15px 20px 0px"/>\
        <input type="text" class="span1 register_input income_count" id="income_'+ FieldCount +'"\
        name="income_'+ FieldCount +'" placeholder="% of income"\ style="margin:0px 15px 20px 15px"/>\
        <a href="#" class="removeclass pull-left"><i class="icon-remove icon-remove-addincome"></i></a></div>');
        x++; //text box increment
    }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
    }
return false;
}) 

});

here is jsfiddle of current situation: http://jsfiddle.net/Uwbe6/

anyone help? I know that problem is in those dynamic fields, but don't know how to solve it. possible solution in my jsfiddle update?

thanks

Upvotes: 0

Views: 6191

Answers (1)

billyonecan
billyonecan

Reputation: 20250

You're caching the .income_count selector, so the newly added elements aren't included in it.

Add the following to the first line of your .delegate() function:

var $summands = $form.find('.income_count');

Here's a fiddle

Upvotes: 1

Related Questions