CODEWITHSUNDEEP
javascriptjqueryblur
Warren
Warren

Reputation: 163

jQuery blur issues on multiple fields

I am trying to create a dynamic quote form where the user can add as many rows as they need. After typing in an input field with the class of 'reCal' I want the total price field to be calculated.

<div class="orderItem">
<div class="row col2">
<input class="reCal nvo" id="iQty" name="item[1][qty]" placeholder="1" value="" />
</div><!--col2-->
<div class="row col3">
<input class="ctp reCal nvwdo currency" id="iPrice" name="item[1][price]" placeholder="100.00" value="" />
</div><!--col3-->
</div><!--orderItem-->

<div class="box">
<p>Net Total (£)</p>
<input class="noh" id="netTotal" name="netTotal" type="text" readonly="readonly" value="0" />
</div>

This is the jQuery I currently have.

$(document).ready(function(){

    $('.reCal').blur(function(){
        calculate();
    });

    function calculate(){
        var net = 0;
        $('.ctp').each(function(){
            net += parseInt($(this).val());
        });
        $('input#netTotal').val(net.toFixed(2));
    }
});

This code does calculate the total sum correctly but the blur function only works on the first input box even though all the other input boxes have the same class.

I dont know if maybe my issue stems from using the .after() command to write each new row. Just a theory though.

Upvotes: 1

Views: 1854

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try this way -

$(document).on('blur','.reCal',function(){
        calculate();
});

Upvotes: 2

Aravind NC
Aravind NC

Reputation: 812

Try the below code,

$(document).ready(function(){

    $('.reCal').live('blur',function(){
    calculate();
    })

    function calculate(){
        var net = 0;
        $('.ctp').each(function(){
            net += parseInt($(this).val());
        });
        $('input#netTotal').val(net.toFixed(2));
    }
});

Upvotes: 0

Related Questions