How to add all the values of dynamically created Textbox

Question

I am working on Billing System, where i have a dropdown which consist of lot of items and a textbox in front of it, which is a price of that item.

I am calling new dropdown and textbox each time using add button.

 var i = 1; var j = 11; $(".btnAdd").click(function() { i += 1; j += 1; $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv" class="row"> <div class="col"> <select id=" 1 " style='width: 130px'> <option value='val1'>a</option> <option value='val2'>b</option> <option value='val3'>c</option> <option value='valn'>z</option> </select> <input type="text" id=" 11 " name="txt" /> </div> </div> <button class="btnAdd">Add</button> <div> <input type="text" id=" totval " name="txt" /> <button class="Submit">Total</button> </div>

My question is how to add all the values when the TOTAL button is clicked and store in TOTAL textbox ? Please help me in this ..

CHECK THIS FIDDLE -> https://fiddle.jshell.net/e20hc1wo/2/

Answer 1

Try this Fiddle

 var i = 1; var j = 11; $(".btnAdd").click(function() { i += 1; j += 1; $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>'); }); $('.Submit').on('click', function() { var total = 0; $('input[type=text]').not('#totval').each(function(index, item) { total += parseInt($(item).val()); }); $('#totval').val(total); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="myDiv" class="row"> <div class="col"> <select id=" 1 " style='width: 130px'> <option value='val1'>a</option> <option value='val2'>b</option> <option value='val3'>c</option> <option value='valn'>z</option> </select> <input type="text" id=" 11 " name="txt" /> </div> </div> <button class="btnAdd">Add</button> <div> <input type="text" id="totval" name="txt" /> <button class="Submit">Total</button> </div>

Answer 2

Implementing the sum is possible:

$(".Submit").click(function () {
    var total = 0;
    $("input:not(#totval)").each(function (_, e) {
        total += parseInt(e.value, 10)
    });
    $("#totval").val(total);
});

Fiddle: https://fiddle.jshell.net/e20hc1wo/12/

But I think the code can be improved a lot if you add meaningful classes to these inputs created.

Improved: The following implementation uses a template row to avoid concatenating HTML code in JS.

<div class="row template">
    <div class="col">
        <select class="typeSelect" style='width: 130px'>
            <option value='val1'>a</option>
            <option value='val2'>b</option>
            <option value='val3'>c</option>
            <option value='valn'>z</option>
        </select>
        <input type="text" class="numberInput" />
    </div>
</div>
<button class="btnAdd">Add</button>
<div>
    <input type="text" id="totval" name="txt" />
    <button class="Submit">Total</button>
</div>

JS:

var template = $(".template").remove();
$(".btnAdd").click(function () {
    template.clone(true).insertBefore('.btnAdd');
}).click();
$(".Submit").click(function () {
    var total = 0;
    $(".numberInput").each(function (_, e) {
        total += parseInt(e.value, 10)
    });
    $("#totval").val(total);
});

It is much shorter and cleaner

Fiddle: https://fiddle.jshell.net/e20hc1wo/23/

Answer 3

Add id to button

<button class= "Submit" id="btnTotal">Total</button>

Add function to javascript

$("#btnTotal").click(function () {
var total = 0;
$(".row input").each(function(){
total += parseInt($(this).val(),10);
})    
$('#totval').val(total);
});