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

Posted 2023-05-09

【中文标题】如何使用 Javascript 访问动态表单元素 id

【英文标题】：How to Acess Dynamic Form Elements id Using Javascript

【发布时间】：2017-05-24 18:36:58

【问题描述】：

我正在使用 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"  border="1">
 <tbody>
  <tr>
  <p>


  <td >
  <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 >
      <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 >
      <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 >
      <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 >
      <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 >
      <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 >
      <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

【问题讨论】：

在计算时用javascript编写onkeyup()函数。将显示结果。

假设您的产品id 是唯一的。所以使<input type="hidden" id="product<?php echo $product['id']?>" value="" />这种类型的输入可以为每个产品dom元素生成唯一的id。其他的也一样。

【参考方案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);

希望对你有帮助

【讨论】：

假设他有5个产品，如果这些产品是从数据库动态生成的，他如何获得$(selector).val()的值？

是的..它有效，但我只能计算表格上的第一个产品的产品价值..但它不适用于第二个产品..请查看我的表格

您需要为每个输入字段生成唯一的 ID。让我编辑答案以供参考。