how to add the multiple input text value in jquery

Question

//my jquery
//get the amount and calculate the total amount

$('#dynamicDiv').on('keyup', '.getAmount', function(event) {
			var total = 0;
			$(this).each(function() {
				total += parseInt(this.value,10);
			});

<div id="dynamicDiv">
<div class="row form-group delDiv">
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Name: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control">
			</div>
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Amount: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control getAmount">
			</div>
		</div>
	</div>
	<div class="col-md-2">
		<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
		</div>
	</div>	
</div>
  	<div class="row form-group delDiv">
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Name: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control">
			</div>
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Amount: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control getAmount">
			</div>
		</div>
	</div>
	<div class="col-md-2">
		<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
		</div>
	</div>	
</div>
</div> <!-- parent div end -->
<div class="form-group">
<div class="row ">
	<div class="col-md-6 col-md-offset-4">
		<div class="form-group">
			<label class="col-md-5 control-label"><b>Allowance Total:</b> </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control totalAmount">
			</div>
		</div>
	</div>
</div>
</div>

i feel this is complex, i want to add the multiple input text value and display in the total amount text value.so that the total sum of the input value. I have jQuery what's wrong with this. any help would be appreciated.

$(this).each ? this will return element on which event is invoked... try $('.getAmount').each — Rayon
– Rayon, Commented May 4, 2016 at 10:02
@Rayon .getAmount class, you check the input tag, i declare the class called getAmount. — Rakesh
– Rakesh, Commented May 4, 2016 at 10:04
@Rayon whenever keypress means new amount(like 123) is added, it should be added with the previous value and show the total sum(final amount — Rakesh
– Rakesh, Commented May 4, 2016 at 10:05

Rayon · Accepted Answer · 2016-05-04 10:35:00Z

In $(this).each(function() {, this will return element on which event is invoked. Use$('.getAmount') selector to get value of all the elements having class as getAmount

Note: Also use input event instead of keyup

$('#dynamicDiv').on('input', '.getAmount', function(event) {
  var total = 0;
  $('.getAmount').each(function() {
    total += parseInt(this.value, 10) || 0;
    //consider || condition as `parseInt('')` is `NaN` or use `Number(this.value)`
  });
  $('.totalAmount').val(total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamicDiv">
  <div class="row form-group delDiv">
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Name:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control">
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Amount:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control getAmount">
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="row form-group delDiv">
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Name:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control">
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Amount:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control getAmount">
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<!-- parent div end -->
<div class="form-group">
  <div class="row ">
    <div class="col-md-6 col-md-offset-4">
      <div class="form-group">
        <label class="col-md-5 control-label"><b>Allowance Total:</b> 
        </label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control totalAmount">
        </div>
      </div>
    </div>
  </div>
</div>

thanks it work, i changed the some, your idea works thanks (this.value || 0, 10) can you explain this please, i need to know
@Rakesh, If value of the input is '', then in .each, parseInt('') will be NaN.. Using ||, we are using OR value if this.value is falsey value..

Collectives™ on Stack Overflow

how to add the multiple input text value in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related