Question

我需要动态添加表单字段。每组输入值包含3个字段quantity，price和total。每次我向quantity和price插入数值时，字段total必须显示总和或乘以。

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

这是我的代码。

$(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>

Answer 1

您应该在一个DOM中使用唯一的id属性。如果一个HTML中存在相同的ids，并且您在jquery中使用它们，则只会考虑ID的第一次出现，并且它将无法按预期工作。

在制作新的动态元素时，请使用class代替id。并在jquery函数upd_art中使用类选择器。

Answer 2

以下是解决方案：

FIRST：添加了JQuery

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

第三：在每个ID和附加方法中添加了一个数字。

第四：更改计算方法以携带id

THIRD：对您创建的计时器进行了评论，并调用了计算输入JQUERY event "change"内最终值的方法。这样，您不会永远处理（即使没有任何更改），也只会在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="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>

动态表示多个输入字段计算

2 个答案: