具有总和的动态表单字段

时间:2017-09-08 21:46:05

标签: javascript jquery ajax forms

根据这个问题here现在我试图从输入字段中计算出计算的moltiplication的总值。 总值必须自动更新,我需要将该值存储到变量中以进行进一步的数据操作。

方案: 动态添加文章

name0,type0,price0,quantity0 - > total_0(价格*数量)

name1,type1,price1,quantity1 - > total_1(价格*数量)

...

nameX,typeX,priceX,quantityX - > total_X(价格*数量)

所有文章的总价值=(total_0 + total_1 + ... + total_X)

这里是html和js代码。

提前感谢您的帮助。



$(document).ready(function() {


  var i = 0;
  $("#sasia-" + i).change(function() {
    upd_art(i)
  });
  $("#cmimi-" + i).change(function() {
    upd_art(i)
  });


  $('#add').click(function() {
    i++;
    $('#artikujt').append('<tr id="row' + i + '"><td><input type="text" class="form-control input-sm name_list" id="artikulli-' + i + '" name="artikulli[]" value="" placeholder="Artikulli..." required /></td><td><select class="form-control input-sm name_list" id="njesia-' + i + '" name="njesia[]"><option value="" selected disabled>Njesia...</option><option value="tjeter">tjeter</option><option value="m">m</option><option value="m2">m2</option><option value="m3">m3</option><option value="cope">cope</option><option value="ml">m/l</option><option value="litra">litra</option><option value="pako">pako</option></select></td><td><input type="number" class="form-control input-sm name_list" id="sasia-' + i + '" name="sasia[]" value="" placeholder="Sasia..." required /></td><td><input type="number" class="form-control input-sm name_list" id="cmimi-' + i + '" name="cmimi[]" value="" placeholder="Cmimi..." required /></td><td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-' + i + '" name="total_art[]" readonly /></td> <td><center><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn-sm btn_remove">X</button></center></td></tr>');

    $("#sasia-" + i).change(function() {
      upd_art(i)
    });
    $("#cmimi-" + 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 = $('#sasia-' + i).val();
    var price = $('#cmimi-' + i).val();
    var totNumber = (qty * price);
    var tot = totNumber.toFixed(2);
    $('#total_art-' + i).val(tot);
  }

});
&#13;
<html>  
      <head>  
           <title>add article</title> 
           <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">add article</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">
                          <div class="table-responsive">  
                            <table class="table table-bordered table-sm" id="artikujt">
                              <thead>
                                    <tr>
                                        <th>item</th>
                                        <th>type</th>
                                        <th>quantity</th>
                                        <th>price</th>
                                        <th>value</th>
                                        <th><center>+ / -</center></th>
                                    </tr>
                                </thead>
                                <tbody>
                                  <tr>  
                                    <td><input type="text" class="form-control input-sm name_list" id="artikulli-0" name="artikulli[]" value="" placeholder="Artikulli..." required /></td>

                                    <td>
                                      <select class="form-control input-sm name_list" id="njesia-0" name="njesia[]">
                                        <option value="" selected disabled>Njesia...</option>
                                        <option value="tjeter">tjeter</option>
                                        <option value="m">m</option>
                                        <option value="m2">m2</option>
                                        <option value="m3">m3</option>
                                        <option value="cope">cope</option>
                                        <option value="ml">m/l</option>
                                        <option value="litra">litra</option>
                                        <option value="pako">pako</option>
                                      </select>
                                    </td>

                                    <td><input type="number" class="form-control input-sm name_list" id="sasia-0" name="sasia[]" value="" placeholder="Sasia..." required /></td>

                                    <td><input type="number" class="form-control input-sm name_list" id="cmimi-0" name="cmimi[]" value="" placeholder="Cmimi..." required /></td>

                                    <td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-0" name="total_art[]" readonly /></td>

                                    <td><center><button type="button" name="add" id="add" class="btn btn-sm btn-success">Add new</button></center></td>
                                  </tr>
                              </tbody>  
                            </table>
                          </div>
                            <div class="row">
                              <div class="col-md-9"></div>
                              <div class="col-md-3">
                                <label class="req">total sum of items </label>
                                <input type="text" class="form-control input-sm subtotali" name="vleramonedhe" id="vleramonedhe" readonly />
                              </div>
                            </div> 
                            <input type="button" name="submit" id="submit" class="btn btn-sm btn-info" value="Submit" />
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>
&#13;
&#13;
&#13;

0 个答案:

没有答案