CODEWITHSUNDEEP
javascriptc#jquery
Anoop B.K
Anoop B.K

Reputation: 1478

How to add all the values of dynamically created Textbox

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/

Upvotes: 1

Views: 1870

Answers (3)

FelisCatus
FelisCatus

Reputation: 5334

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/

Upvotes: 2

user2527768
user2527768

Reputation: 66

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);
});

Upvotes: 1

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 2

Related Questions