Как автоматизировать изменение значения в форме при нажатии кнопки от javascript jQuery?

Question

У меня есть форма с 4 строками: A, B, C и Total.

C - это необязательно , поэтому я могу показать / скрыть его.

Total - сумма от A до C.

Допустим, я поставил A: 3, B: 4 и C: 7. Итак, в сумме будет показано 14.

Когда я нажму "Закрыть C ", предполагается, что сумма только A и B значение, которое равно 7, C было не включено, даже если я уже установил C значение до 0. Но этого не произошло. Значение в сумме было все еще 14.

Вот мой код пока

    $(document).ready(function(){
		$("#btn_add_c").click(function()
		{
			$("#form_c").show();
			$("#add_value_c").hide();
		});
		
		$("#cancel_c_value").click(function()
		{
			$("#btn_add_c").show();
			$("#form_c").hide();
			//reset the value_c to 0
			$("#value_c").val(0);
		});
		
		$("#value_a, #value_b, #value_c").on("change", function()
		{
			var value_a = Math.abs($("#value_a").val());
			var value_b = Math.abs($("#value_b").val());
			var value_c = Math.abs($("#value_c").val());
			
			var total = value_a + value_b + value_c;
			
			$("#total").val(total);
		});
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<button type='button' id="btn_add_c">Add C</button>
</div>

<form action ="" method="post">
	<div>
  	<label>Input A</label>
	  <div>
	    <input type="text" class="number" id="value_a">
	  </div>
	</div>
	
	<div>
	  <label>Input B</label>
	  <div>
	   <input type="text" class="number" id="value_b">
	  </div>
	</div>
	
	<div id="form_c" style="display:none">
	  <label>Input C</label>
	  <div>
	    <input type="text" class="number" id="value_c">
	  </div>
	  <i id="cancel_c_value">Close C</id>
	</div>
	
	<div>
	  <label>Total</label>
	  <div>
	   <input type="text" class="number" id="total" readonly>
	   </div>
	</div>
 </form>

Может кто-нибудь, пожалуйста, помогите мне, как изменить Общее значение автоматически при нажатии кнопки закрытия.

Fiddle: https://jsfiddle.net/b3nrdyem/4/

Answer 1

Изменение значения с помощью Javascript не приведет к событию change, но вы можете вызвать его самостоятельно с помощью $('#value_a').trigger('change');:

$(document).ready(function() {
  $("#btn_add_c").click(function() {
    $("#form_c").show();
    $("#add_value_c").hide();
  });

  $("#cancel_c_value").click(function() {
    $("#btn_add_c").show();
    $("#form_c").hide();
    //reset the value_c to 0
    $("#value_c").val(0);
    $('#value_a').trigger('change');
  });

  $("#value_a, #value_b, #value_c").on("change", function() {
    var value_a = Math.abs($("#value_a").val());
    var value_b = Math.abs($("#value_b").val());
    var value_c = Math.abs($("#value_c").val());

    var total = value_a + value_b + value_c;

    $("#total").val(total);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<button type='button' id="btn_add_c">Add C</button>
</div>

<form action ="" method="post">
	<div>
	<label>Input A</label>
	<div>
	<input type="text" class="number" id="value_a">
	</div>
	</div>
	
	<div>
	<label>Input B</label>
	<div>
	<input type="text" class="number" id="value_b">
	</div>
	</div>
	
	<div id="form_c" style="display:none">
	<label>Input C</label>
	<div>
	<input type="text" class="number" id="value_c">
	</div>
	<i id="cancel_c_value">Close C</id>
	</div>
	
	<div>
	<label>Total</label>
	<div>
	<input type="text" class="number" id="total" readonly>
	</div>
	</div>
</form>