如何使用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);
}

希望这有帮助