CODEWITHSUNDEEP
jqueryhtml
ashik
ashik

Reputation: 121

jQuery doesn't work in input field

i want to save values in to db where we calculate called total and grand total.so i want to calculate it in the input field.i have tried that.but doesn't work. as i realize the issues come with $('.multTotal',this).text(total); "text" in the line and $("#grandTotal").text(mult); and "text" in the line . can u help me plz

View

    <table class="table" id="boq_tbl">
        <thead>

       <thead>

            <tbody>
    <tr class="txtMult">

                <td><input type="text" name="work_product_id" class="form-control" id="work_product_id" placeholder=""></td>
    <td><input type="text" name="cost_code" class="form-control" id="cost_code" placeholder=""></td>
    <td><input type="text" name="work_item_description" class="form-control" id="work_item_description" placeholder=""></td>
    <td><input type="text" name="quentity" id="" class="form-control val1" /></td>
    <td><input type="text" name="unit" class="form-control val2"/></td>
    <td><input type="text" name="laboure_hrs" id="" class="form-control val3" /></td>
    <td><input type="text"name="laboure_cost" id="" class="form-control val4"/></td>
    <td><input type="text" name="others" class="form-control" id="others" placeholder=""></td>


        <td>
                <span class="multTotal">0.00</span>
        </td>
    </tr>

     </tbody>
       </table> 
<p align="right">
    Grand Total# <span id="grandTotal">0.00</span>
</p>

jQuery

 <script>
$("#insert-more").click(function () {
     $("#boq_tbl").each(function () {
         var tds = '<tr class="txtMult">';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

$("#boq_tbl").on("keyup", ".txtMult input", multInputs);


function multInputs() {
    var mult = 0;
    // for each row:
    $("tr.txtMult").each(function () {

        console.log('---dkhal');
        // get the values from this row:
        var val1 = $('.val1', this).val();
        var val2 = $('.val2', this).val();
        var val3 = $('.val3', this).val();
        var val4 = $('.val4', this).val();
        var total = (val1 * val2 ) + (val3 * val4);

        console.log('---'+val1 * val2);
        $('.multTotal',this).text(total);
        mult += total;
    });
    $("#grandTotal").text(mult);
}


</script>

Upvotes: 0

Views: 87

Answers (3)

Rino Raj
Rino Raj

Reputation: 6264

Please try this

function multInputs() {
    var mult = 0;
    $("tr.txtMult").each(function () {
        var val1 = $('#val1', this).val();
        var val2 = $('#val2', this).val();
        var val3 = $('#val3', this).val();
        var val4 = $('#val4', this).val();
        var total = (parseInt(val1) * parseInt(val2) ) + (parseInt(val3) * parseInt(val4));
        $('.multTotal',this).text(total);
        mult += total;
        $('#txtmultTotal').val(mult);
    });
    $("#grandTotal").text(mult);
    $('#txtgrandTotal').val(mult);
}

Problems in your code:

`val1,va12,val3,val4`

are not class ,its Id's. So you should write like $('#val1', this).val(); not like $('.val1', this).val();.

You should use parseInt() to convert the value to integer.

DEMO

Upvotes: 1

Domain
Domain

Reputation: 11808

As described above change your 'class' names to 'id' specific and also call the :

 $("#boq_tbl").on("keyup", ".txtMult input", multInputs);

method after the DOM is ready like 

$(document).ready(function(){
     $("#boq_tbl").on( "keyup" , ".txtMult input" , multInputs );
});

Upvotes: 0

Daniel Casserly
Daniel Casserly

Reputation: 3500

I think one of the issues with this code is using . instead of # throughout. For example, 

  var val1 = $('.val1', this).val();

should read 

  var val1 = $('#val1', this).val();

and there are many other examples. "." is for class and "#" is for id.

Upvotes: 2

Related Questions