使用jquery附录部分计算jquery / javascript中的文本字段数组？

Question

我已经使用HTML和CSS创建了一个使用表单域的用户界面。我用PHP编写的后端程序。我必须输入值一对多关系，比如一个订单有很多乘客。所以我创建了表单字段，比如order和passengers可以一次性插入到数据库中。

因此，用户可以填写订单数据，然后他们将使用jquery附录部分添加乘客数据。如果用户单击add按钮，页面将生成另一个乘客详细信息表单字段。

所以我的问题是乘客表单字段有一些像*这样的计算字段。total_tax = yq + yr + tax_3 + tax_4

这些是每个乘客表中的场方程式。

所以我想，如何计算每个单独的乘客？(当我键入文本时，会自动逐个计算表单字段的值)

我使用的是PHP的最新版本7.3.10。我已经尝试过使用javascript和jquery进行计算。它只适用于第一个passenger表单字段。它不适用于其他乘客(如果我添加了10名乘客，只适用于第一名乘客)。

所以我想使用javascript或jquery、keyup事件或其他工具分别计算所有乘客的表单字段？

order.php：

<form action="includes/exchange-order.inc.php" method="post">
   <div id="main_div" class="main_sec_div">
      <button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
      <br />
      <br />

      <label for="validationCustom04">Tax-3 (0.00)</label>
      <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc()" required>
      <br />

      <label for="validationCustom03">Tax-4 (0.00)</label>
      <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc()" required>
      <br />

      <label for="validationCustom04">Total Tax (0.00)</label>
      <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
      <br />

    <button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>

</div>
  </form>


<script>
        $(document).ready(function() {

          var i = 0;

          // add button
          $(document).on('click', '#add', function() {
            i++;
            console.log('Add', i);
            html = `<div id="sub_div${i}" class="second-div">

            <button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>

            <br />
            <br />

            <label for="validationCustom04">Tax-3 (0.00)</label>
            <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc()" required>
            <br />

            <label for="validationCustom03">Tax-4 (0.00)</label>
            <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc()" required>
            <br />

            <label for="validationCustom04">Total Tax (0.00)</label>
            <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
            <br />

          </div>`;

            $('#main_div').append(html);
          });

          // remove button
          $(document).on('click', '.remove', function(e) {
            var remove_btn_id = $(this).attr('id');
            $('#sub_div' + remove_btn_id).remove();
            i--;
            console.log('Remove', i);
          });

        });
      </script>

tex_calc.js：

//Total Tax[Tax - 3, Tax - 4]
function calc(obj) {
  var tax_3 = 0;
  var tax_4 = 0;
  var total_tax = 0;

  var e = obj.id.toString();

  if (e == 'tax_3') {

    tax_3 = Number(obj.value);
    tax_4 = Number(document.getElementById('tax_4').value);
    total_tax = Number(document.getElementById('total_tax').value);

  }
  else if (e == 'tax_4') {

    tax_3 = Number(document.getElementById('tax_3').value);
    tax_4 = Number(obj.value);
    total_tax = Number(document.getElementById('total_tax').value);

  }
  else if (e == 'total_tax') {

    tax_3 = Number(document.getElementById('tax_3').value);
    tax_4 = Number(document.getElementById('tax_4').value);
    total_tax = Number(obj.value);

  }


  // Total Tax
  total_tax = tax_3 + tax_4;
  document.getElementById('total_tax').value = total_tax.toFixed(2);

}

所以我希望使用javascript或jquery keyup事件或其他工具分别计算所有乘客的表单字段？

如何单独计算每一位乘客？

Answer 1

我发现我的问题的答案是100%有效。

Order.php：

<form action="includes/exchange-order.inc.php" method="post">

    <div id="main_div" class="main_sec_div">
      <button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
      <br />

      <label for="validationCustom04">Tax-3 (0.00)</label>
      <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc(this)" required>
      <br />

      <label for="validationCustom03">Tax-4 (0.00)</label>
      <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc(this)" required>
      <br />

      <label for="validationCustom04">Total Tax (0.00)</label>
      <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
      <br />


    </div>

    <button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>    

  </form>


<script>
    $(document).ready(function() {

      var i = 0;

      // add button
      $(document).on('click', '#add', function() {
        i++;
        console.log('Add', i);
        html = `<div id="sub_div${i}" class="second-div">

        <button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>

        <br />
        <br />

        <label for="validationCustom04">Tax-3 (0.00)</label>
        <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc(this)" required>
        <br />

        <label for="validationCustom03">Tax-4 (0.00)</label>
        <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc(this)" required>
        <br />

        <label for="validationCustom04">Total Tax (0.00)</label>
        <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
        <br />    

      </div>`;

        $('#main_div').append(html);
      });

      // remove button
      $(document).on('click', '.remove', function(e) {
        var remove_btn_id = $(this).attr('id');
        $('#sub_div' + remove_btn_id).remove();
        i--;
        console.log('Remove', i);
      });

    });
  </script>

tex_calc.js文件编码：

//Total Tax[YQ, YR, Tax - 3, Tax - 4]

var tax_3 = [];
var tax_4 = [];
var total_tax = [];

function calc(obj) {

    var e = obj.id.toString();

    if (e == 'tax_3' + i) {
      tax_3[i] = Number(obj.value);
      tax_4[i] = Number(document.getElementById('tax_4' + i).value);
      total_tax[i] = Number(document.getElementById('total_tax' + i).value);

    }
    else if (e == 'tax_4' + i) {

      tax_3[i] = Number(document.getElementById('tax_3' + i).value);
      tax_4[i] = Number(obj.value);
      total_tax[i] = Number(document.getElementById('total_tax' + i).value);

    }
    else if (e == 'total_tax' + i) {

      tax_3[i] = Number(document.getElementById('tax_3' + i).value);
      tax_4[i] = Number(document.getElementById('tax_4' + i).value);
      total_tax[i] = Number(obj.value);

    }


    // Total Tax
    total_tax[i] = Number(tax_3[i] + tax_4[i]);
    // console.log('Total ', total_tax[i]);
    document.getElementById('total_tax' + i).value = total_tax[i].toFixed(2);



  }

}