How to display the total number of quantity in the input box

Question

I have a quantity field. The user can add multiple quantity fields on click on Add button.

My issue is, I have to display the total number of quantity in the input box. for example I added 10 quantity in the quantity box and the total is 10 in the total box.

The user can increase and decrease the quantity on click on plus and minus button as well as direct enter then quantity in the quantity box and total will display in the total box.

The user can add multiple quantities field same as on remove. I click on to remove the quantity should be removed from the total quantity field.

You can also check my code here as well https://jsfiddle.net/pu6qy4zr/70/

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;

}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $("input[id^=medication_name]").focus();
      $(wrapper).append(' -  + 
   -  Remove

');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.custom_fields').remove();
    x--;
  })


});

mplungjan · Accepted Answer

You can simplify all this.

run sum() on each change including the remove and direct input/paste.
only have one event handler for the plus/minus
remove the inline handlers

PS: I found a bug: value < 1 ? value = 1 : ''; would force a value of 1
PPS: I suggest you use .clone for the div instead of inserting it. Makes it much easier to update the HTML. Since I delegate and use relative addressing, you do not need to change the IDs of the fields

function sum() {
  var total = 0;
  $(".qty_number").each(function() { // or use .map.get()
    total += this.value?parseInt(this.value):0;
  })
  $("#total_qty").val(total);
}


$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var $wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).on("click",function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $("input[id^=medication_name]").focus();
      $wrapper.append(' -  + 
   -  Remove

');
    }
  });

  $wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.custom_fields').remove();
    x--;
    sum(); // remove also updates the total
  })
  $wrapper.on("click",".value_button",function() {
    var $input = $(this).closest(".plus_minus").find(".qty_number");
    var value = parseInt($input.val(), 10);
    value = isNaN(value) ? 0 : value;
    value+=$(this).is(".decrease")?-1:1; // decrease on increase dependent on class
    if (value < 0) value=0;
    $input.val(value);
    sum(); // sum each time
  });
  $wrapper.on("input",".qty_number",sum); // any input or paste
});

How to display the total number of quantity in the input box

Answers (1)

Related Questions