How to add or remove values using jquery.?

Question

<div class="container">
	<div class="form-group">
		<form>  
			<button>click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
			<label>total values</label>
			<input type="text" name="total_ammount" value="50" readonly>
		</form>  
	</div>
</div>

if i click button to add first input value which is 10 so it will addition with my total input field values if again the same button so substract the values. remaining field should do the same work also. how it is possible by using jquery please explain it.

JIJOMON K.A · Accepted Answer · 2018-11-13 06:30:27Z

3

Please Try the below code.,

function addValue(dhis){
  var val=parseFloat(dhis.children().val()) // get the text box value
  var total_ammount=parseFloat($('#total_ammount').val())+val
  $('#total_ammount').val(total_ammount);
  dhis.attr('onclick','subValue($(this))') // change the onclick function
}
function subValue(dhis){
  var val=parseFloat(dhis.children().val()) // get the text box value
  var total_ammount=parseFloat($('#total_ammount').val())-val
  $('#total_ammount').val(total_ammount);
  dhis.attr('onclick','addValue($(this))') // change the onclick function
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="form-group">
		<form>  
			<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
			<label>total values</label>
			<input type="text" name="total_ammount"  id="total_ammount" value="50" readonly>
		</form>  
	</div>
</div>

answered Nov 13, 2018 at 6:30

JIJOMON K.A

1,2903 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JIJOMON K.A Over a year ago

you are welcome. please mark it as helpful. thank you.

Ferdinando Over a year ago

JIJOMON K.A 's answer is very good. @md server you can use also pure javascript without jquery for this solution.

JIJOMON K.A Over a year ago

@Ferdinando Thank you, You can appreciate me with a up vote :)

Collectives™ on Stack Overflow

How to add or remove values using jquery.?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related