我有一个表单,使用户能够向表单添加其他字段表单,并从数据库中为select / options选择数据。
它工作正常但不完全正确,我想知道是否有人不介意密切关注代码,看看能否以更清洁的方式完成。
主要问题是选择不会将正确的值发送到动作脚本。
表单的HTML输出:
<?php $dashboardId = $_GET['dashboard_id']; ?>
<form action="cm.php" method="POST">
<input type="hidden" name="dashboardId" value="<?php echo $dashboardId; ?>">
<div id="exercises">
<div class="team">
<select name="teamId[]">
<?php
$sql = "SELECT * FROM teams WHERE dashboard_id = $dashboardId";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
echo '<option value="' . $row["team_id"] . '">' . $row["team_name"] . '</option>';
}
}
?>
</select>
<button class="remove">x</button>
</div>
</div>
<button id="add_exercise">add more</button>
<br>
<input type="text" name="memberName">
<br>
<input type="submit" name="submit" value="Create Member" />
</form>
所以上面提出了我的简单形式。第二部分是JQuery,它处理设施以添加其他选择字段。
<script type="text/javascript">
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="team"><select name="teamName[]"><?php
$sql = "SELECT * FROM teams WHERE dashboard_id = $dashboardId";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
echo '<option value="' . $row["team_id"] . '">' . $row["team_name"] . '</option>';
}
}
?> </select><button class="remove">x</button></div>');
return false; //prevent form submission
});
$('#exercises').on('click', '.remove', function() {
$(this).parent().remove();
return false; //prevent form submission
});
</script>
现在可以看出它并不是将jQuery和Php结合起来的最好的解决方案,但是我不知道我怎么把它分开呢?所以当我做var_dump($_POST)
时,我发现生成的选择传递["teamName"]=> array(1) { [0]=> string(3) "211"
应该传递["teamId"]=> array(1) { [0]=> string(3) "211"
我完全清楚它对SQL注入是开放的,但是现在我只是想让这个小部分工作。
更新 - 团队表格情景
答案 0 :(得分:1)
Main.php文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div>
<select class="options" name="">
<option value="1">item_1</option>
<option value="1">item_2</option>
<option value="1">item_3</option>
</select>
</div>
</div>
<button type="button" class="addme" name="button">Add More</button>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.addme').click(function(){
$.ajax({
url:'getData.php',
type:'GET',
success:function(result){
console.log(result);
$('.wrapper').append(result);
}
})
});
});
getData.php文件
<select>
<option value='1'>Item1</option>
<option value='2'>Item2</option>
<option value='3'>Item3</option>
</select><br>
在此示例中,getData文件数据是静态的,但您具有写入查询以获取下拉列表数据并传递成功响应。