使用选择下拉列表调用javascript函数

时间:2017-09-17 09:04:50

标签: javascript jquery html mysql

使用动态表单,最终用户可以通过单击添加按钮输入所需的材料,此按钮调用JavaScript函数,将下拉列表插入到我的表单中。如果我删除了选择部分它工作,它调用输入字段,但如果我添加选择部分,它不会调用该函数。



 <script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function add_row()
{
 $rowno=$("#recipe_details tr").length;
 $rowno=$rowno+1;
$("#recipe_details tr:last").after("<tr id='row"+$rowno+"'>    <td><select name="Material1[]">
<?php 

$sql2 = mysqli_query($conn, "SELECT * FROM Material");

while ($r = $sql2->fetch_assoc()){

?>
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

<?php
// close while loop 
}
?></select></td><td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
 $('#'+rowno).remove();
}
</script>




<div id="wrapper">

<div id="form_div">
 <form method="post" action="">
  <table id="recipe_details" align=center>
   <tr id="row1">
    <td><select name="Material1[]">
<?php 

$sql2 = mysqli_query($conn, "SELECT * FROM Material");

while ($r = $sql2->fetch_assoc()){

?>
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

<?php
// close while loop 
}
?></select></td>
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

更新的代码: -

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function add_row()
{
    $rowno = $("#recipe_details tr").length;
    $rowno = $rowno+1;

    $("#recipe_details tr:last").after(
        `<tr id='row` + $rowno + `'><td><select name='Material1[]'>
         <?php 

    $sql2 = mysqli_query($conn, "SELECT * FROM Material");

    while ($r = $sql2->fetch_assoc()){

    ?>
    <option value = <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

    <?php
    // close while loop 
    }
    ?>
        <option value = 'Option 1'>Option 1</option>
        </select ></td >
        <td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td>
        <td><input type='button' value='DELETE' onclick=delete_row('row`+ $rowno + `')></td></tr>"`);
}
function delete_row(rowno)
{
    $('#'+rowno).remove();
}
</script>




<div id="wrapper">

<div id="form_div">
 <form method="post" action="">
  <table id="recipe_details" align="center">
   <tr id="row1">
    <td><select name="Material1[]">
<?php 
$sql2 = mysqli_query($conn, "SELECT * FROM Material");
while ($r = $sql2->fetch_assoc()){

?>
<option value ='<?php echo $r["Material_ID"] ?>><?php echo $r["Material"];?>'></option>

<?php
// close while loop 
}
?></select></td>
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

</div>

我已在我的机器上检查此代码段以获取员工列表。它的工作正常。 如果您仍然面临一些问题,请告诉我。 它也适用于你的机器。