如何使用 Javascript 访问动态表单元素 id

Question

我正在使用 PHP 和 Javascript 创建动态表单元素，我可以使用 PHP 访问动态表单元素值。

但我的要求是在将数据发送到服务器之前，我想计算我个人产品的税收和折扣.. 并显示总价

工作正常：

我可以动态添加表单元素 将动态产品值发布到服务器

问题：

单独计算所有动态产品的税费和折扣 并在将数据发送到服务器之前显示详细信息..

我想显示单个产品的总价

谢谢...

这是我添加动态元素的代码：

<script type="text/javascript">

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount < 20){        `enter code here`       `enter code here`             // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i <colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
  }
else{
     alert("Maximum Passenger per ticket is 5");         

 }
}
</script>

我的 HTML 表单代码：

<table id="dataTable" class="form" border="0" width="100%" border="1">
 <tbody>
  <tr>
  <p>


  <td width="15%">
  <label for="BX_birth">Product name</label>
  <select class="form-control" style="width:70%;" id="BX_birth" name="pname[]">
    <option>....</option>
   <?php
                    include_once "connection.php";
                    $qry="SELECT * FROM `item` WHERE `totqty` NOT LIKE '0' ORDER BY `id` DESC";
                    $res=mysqli_query($con,$qry);
                    while ($row=mysqli_fetch_assoc($res)) {
                     $id=$row['id'];
                     $name=$row['name'];


                    ?>

                    <option><?php echo $name; ?></option>
                    <?php
                  }
                    ?>
  </select>
  </td>



  <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">Qty</label>
                  <input type="text" class="form-control" name="pqty[]" id="qty" oninput="calculate()"   placeholder="">
                </div>
  </td>
  <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">Rate</label>
                  <input type="text" class="form-control" name="prate[]" id="rate" oninput="calculate()"    placeholder="">
                </div>
  </td>

    </td>
  <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">Discount</label>
                  <input type="text" class="form-control" name="discount[]" id="discount" oninput="calculate()"    placeholder="">
                </div>
  </td>

    </td>
  <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">Sub Total</label>
                  <input type="text" class="form-control" name="subtotal[]" id="subtotal" oninput="calculate()"    placeholder="">
                </div>
  </td>

   <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">VAT(%)</label>
                  <input type="text" class="form-control" name="vat[]" id="vat" oninput="calculate()"   placeholder="">
                </div>
  </td>

   <td width="15%">
      <div class="form-group">
                  <label for="exampleInputEmail1">Total</label>
                  <input type="text" class="form-control" name="total[]" id="total" oninput="calculate()"    placeholder="">
                </div>
  </td>






</p>
  </p>
  </tr>

 </tbody>
</table>

获取动态表单值的我的 PHP 代码：

foreach( $pname as $key => $n ) {
  $pn=$pname[$key];
  $pr=$prate[$key];
  $pq=$pqty[$key];

}

我的表格：

http://techmyntra.co.in/website-designing-and-development-company-vellor.html

http://www.techmyntra.co.in

Answer 1

在 PHP 中生成表单时

假设你正在使用while循环来生成动态表单

$index = 1;
while(.....)
{
   $id1 = "MyField_".$index;

   echo "<input type='text' id=$id1 />";

   $id2 = "MyField2_".$index;
   echo "<input type='text' id=$id1 onblur='total($index);' />";

   $idTotal = "MYTotalField_".$index;
   echo "<input type='text' id=$idTotal />";

   $index++;

}

//--[JS Method]--
function total(index)
{
  var value1 = $("#MyField_"+index).val();
  var value2 = $("#MyField2_"+index).val();
  .
  .
  var valuen = $("#selectorn").val();


  var total = value1 + value2 + .... + valuen;
  $("#MYTotalField_"+index).val(total);
}

希望对你有帮助