动态表单多个输入字段计算 [英] dynamic forms multiple input fields calculate

问题描述

我需要动态添加表单字段。每组输入值包含3个字段， quantity ， price 和 total 。每当我将数字值插入数量和价格字段总数必须显示总和或乘数。

我意识到这一点，但它只适用于第一个领域。当我添加另一行字段时，它不计算其他字段。

这是我的代码。 div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

< code>< / pre>< code<< ; HTML>< HEAD> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js>< / script> < link rel =stylesheethref =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_nameid =add_name> < div class =table-responsive> < table class =table table-borderedid =articles> < TR> < td>< input type =numberid =quantityname =quantity []placeholder =quantityclass =form-control name_list/>< / td> < td>< input type =numberid =pricename =price []placeholder =priceclass =form-control name_list/>< / td> < td>< input type =numberid =totalname =total []placeholder =totalclass =form-control name_listreadonly />< / td> < td>< button type =buttonname =addid =addclass =btn btn-success>添加新< / td> < / TR> < /表> < input type =buttonname =submitid =submitclass =btn btn-infovalue =Submit/> < / DIV> < /形式> < / DIV> < / div>< / body>< / html>  

h2_lin>解决方案

以下是解决方案：

FIRST：添加JQuery

SECOND：更正了要计算的方法。如果你想要数量*价格，它应该乘以而不是总和。查看我的更改

THIRD：在每个ID和append方法中添加一个数字。

FOURTH：已更改计算携带id的方法

THIRD：评论您创建的计时器，并调用计算 JQUERY事件更改输入。这样，你不会永远处理（即使没有任何变化），只有当 change 事件被触发时才会计算它。

希望它有帮助

$（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 =numbervalue = 0 id =quantity-'+ i +'name =quantity []placeholder =quantityclass =form-control name_list/>< td>< td>< input type =numberid =price-'+ i +'name =price []value = 0 placeholder =priceclass =form-control name_list/> ;< / td>< td>< input type =numberid =total-'+ i +'name =total []placeholder =totalclass =form-control name_listreadonly />< / td> < td><按钮类型=按钮名称=删除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（））; //提醒所有值$ .ajax（{url：wwwdb.php，方法： POST，data：$（'＃add_name'）。serialize（），success：function（data）{$（'＃add_name'）[0] .reset（）;}}）;}）;函数upd_art（i）{var qty = $（'＃quantity-'+ i）.val（）; var price = $（'＃price-'+ i）.val（）; var totNumber =（数量*价格）; 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 =stylesheethref =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_nameid =add_name> < div class =table-responsive> < table class =table table-borderedid =articles> < tr class =rrjeshta> < td>< input value = 0 type =numberid =quantity-0name =quantity []placeholder =quantityclass =form-control name_list/>< / td> < td>< input value = 0 type =numberid =price-0name =price []placeholder =priceclass =form-control name_list/>< / td> < td>< input type =numberid =total-0name =total []placeholder =totalclass =form-control name_listreadonly />< / td> < td>< button type =buttonname =addid =addclass =btn btn-success>添加新< / td> < / TR> < /表> < input type =buttonname =submitid =submitclass =btn btn-infovalue =Submit/> < / DIV> < /形式> < / DIV> < / div>< / body>< / html>

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>

解决方案

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>

这篇关于动态表单多个输入字段计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！