jQuery sum of textbox

Question

Below is my HTML

I want a script like this in one Textbox I want to add all the amount total and display it and in one more textbox I want it like this

"name": [{
  "id": 3,
  "qty": 2
}, {
  "id": 4,
  "qty": 5
}]

My Updated Question

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<button>Click Me!!!</button>

My Updated code not working in this js core js is working fine

What do you mean by "I want a script like this in one Textbox"? — Mamun
– Mamun, Commented Dec 5, 2017 at 4:50

Mamun · Accepted Answer · 2017-12-05 05:17:40Z

Try the following way:

$('input[name="qty"]').change(function(){
  var name = [];
  $('.main').each(function(index,item){
    var obj={};
    obj.id = $(item).find('input[name="id"]').val();
    obj.qty = $(item).find('input[name="qty"]').val();
    name.push(obj)
  });
  console.log(name);
});

input{
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>

Varun · Accepted Answer · 2017-12-05 04:51:22Z

0

var s = { 'name' : [] };
var total =  0; 
$(".main").each(function(){
     s['name'].push({ 'id': $(this).find("input[name='id'"]).val(),'qty': $(this).find("input[name='qty'"]).val()});

     total = total + parseFloat($(this).find("input[name='total'"]).val());

});

//total gives final sum //object s gives the array of objects.

answered Dec 5, 2017 at 4:51

Varun

1,9562 gold badges12 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery sum of textbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related