Dynamic Forms Multiple Input Fields Calculate

March 31, 2024 Post a Comment

I need to add form fields dynamically. Each group of input values contain 3 fields, quantity, price, and total. Every time I insert numeric values to quantity and price the field t

Solution 1:

Here is the solution:

FIRST: Added JQuery

SECOND: Corrected the method to calculate. It should multiply instead of making sum if you want quantity * price. Review my changes

THIRD: Added a number on each ID and in the append method.

FOURTH: Changed calculate method to carry the id

THIRD: Commented the timer you created, and called the method that calculates the final value inside the JQUERY event "change" of the inputs. This way, you are not processing forever (even when nothing changed) and it´s only calculated when the change event is fired

Hope it helps

$(document).ready(function() {
  var i = 0;
  $("#quantity-" + i).change(function() {
    upd_art(i)
  });
  $("#price-" + i).change(function() {
    upd_art(i)
  });


  $('#add').click(function() {
    i++;
    $('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0  placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

    $("#quantity-" + i).change(function() {
      upd_art(i)
    });
    $("#price-" + i).change(function() {
      upd_art(i)
    });


  });


  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $('#submit').click(function() {
    alert($('#add_name').serialize()); //alerts all values           
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $('#add_name').serialize(),
      success: function(data) {
        $('#add_name')[0].reset();
      }
    });
  });

  functionupd_art(i) {
    var qty = $('#quantity-' + i).val();
    var price = $('#price-' + i).val();
    var totNumber = (qty * price);
    var tot = totNumber.toFixed(2);
    $('#total-' + i).val(tot);
  }



  //  setInterval(upd_art, 1000);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><divclass="container"><br /><br /><h2align="center">title</h2><divclass="form-group"><formname="add_name"id="add_name"><divclass="table-responsive"><tableclass="table table-bordered"id="articles"><trclass="rrjeshta"><td><inputvalue=0type="number"id="quantity-0"name="quantity[]"placeholder="quantity"class="form-control name_list" /></td><td><inputvalue=0type="number"id="price-0"name="price[]"placeholder="price"class="form-control name_list" /></td><td><inputtype="number"id="total-0"name="total[]"placeholder="total"class="form-control name_list"readonly /></td><td><buttontype="button"name="add"id="add"class="btn btn-success">Add new</button></td></tr></table><inputtype="button"name="submit"id="submit"class="btn btn-info"value="Submit" /></div></form></div></div></body></html>

Solution 2:

You should use unique id attributes in one DOM. When same ids are present in one HTML, and you use them in jquery, only first occurances of the id will be considered and it will not work as expected.

use class instead id when you make new dynamic elements. and use class selector in jquery function upd_art.

Html5 Works

Dynamic Forms Multiple Input Fields Calculate

Solution 1:

Solution 2:

Post a Comment for "Dynamic Forms Multiple Input Fields Calculate"