我正在为我的项目创建“动态添加/删除”输入字段。列之一具有输入的选择类型,并且选项需要来自数据库中的表。它在第一行上运行良好,但是当我需要添加更多字段时,它不起作用。可以在jQuery的.append函数上放置php代码吗?
我尝试对.append函数的第一行进行相同的处理,但是当我添加更多字段时,它什么也没有添加。当我删除php代码时,它可以正常工作,但不能使用数据库中的选项。我不知道在追加功能中显示数据库中的值时是否出现语法错误。
<?php
<tr>
<td>
<select class="form-control" name="procedures[]">
<?php
$sql = "SELECT * FROM services";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result))
{
echo '<option>'.$row['s_name'].'</option>
';
}
?>
</select>
</td>
<td><input type="text" name="description[]" placeholder="Description" class="form-control name_list" /></td>
<td><input type="text" name="amount[]" placeholder="Amount" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
这是添加函数,可以像上面的行格式一样添加更多文本字段。
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="procedures[]"><?php $sql="SELECT * FROM services"; $result=mysqli_query($conn,$sql); while($row=mysqli_fetch_array($result)){ echo "<option>'".$row['s_name']."'</option>";}?></select> </td><td><input type="text" name="description[]" placeholder="Description" class="form-control name_list" /></td><td><input type="text" name="amount[]" placeholder="Amount" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">x</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
我希望我可以与第一行相同地添加更多输入字段,第一行具有一列select输入,其中包含来自数据库表的选项。 Click here to see the image