dynamic forms multiple input fields calculate

Question

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 total must show the sum or multiply.

I have realized this but it works only on the first field. When I add another row of fields it doesn't calculate others.

Here is my code.

$(document).ready(function() {
    var i = 1;
    $('#add').click(function() {
	    i++;
	    $('#articles').append('<tr id="row' + i + '"><td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total" 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>');
    });

    $(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 and works fine          
	    $.ajax({
		    url: "wwwdb.php",
		    method: "POST",
		    data: $('#add_name').serialize(),
		    success: function(data) {
			    $('#add_name')[0].reset();
		    }
	    });
    });

    function upd_art() {
	    var qty = $('#quantity').val();
	    var price = $('#price').val();
	    var total = (qty * price).toFixed(2);
	    $('#total').val(total);
    }
    setInterval(upd_art, 1000);
});

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <br />
    <br />
    <h2 align="center">title</h2>
    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="articles">
            <tr>

              <td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
              <td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td>
              <td><input type="number" id="total" name="total[]" placeholder="total" class="form-control name_list" readonly /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>
</body>
</html>

this script works fine when i insert values to database. The goal is to not insert the value total manually but to calculate it automatically and then save to db. If possible any example on how to figure with unique ids in this case. Thanks — Sigma
– Sigma, Commented Sep 8, 2017 at 10:53

Alejandro Teixeira Muñoz · Accepted Answer · 2017-09-08 11:07:58Z

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();
      }
    });
  });

  function upd_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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />
    <h2 align="center">title</h2>
    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="articles">
            <tr class="rrjeshta">

              <td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
              <td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list" /></td>

              <td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list" readonly /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>
</body>

</html>

u welcome!! ;) . Saw that the first row does not change "after" creating seconds or thirds. Maybe needs further checking, but the idea on how to use ids on jquery is this way. Anyway, strongly recommend using angularJs for those thins ;)

Himanshu Upadhyay · Accepted Answer · 2017-09-08 10:26:35Z

0

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.

answered Sep 8, 2017 at 10:26

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

Collectives™ on Stack Overflow

dynamic forms multiple input fields calculate

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related