我有一个按钮，可以添加文本框及其食物和动物值(value)。但是，我在将其保存到数据库时遇到问题。有没有一种方法可以保存所有添加的选定动物名称、食物、生日和名字。假设用户选择了狗、猫和猴子。我如何将所有信息以及所选的下拉类和动物一起保存到数据库中，因为它只保存最后添加的动物信息，而不是所有选择的选项。请我需要帮助
请查看整页代码，看看代码是如何工作的，并首先尝试忽略错误
<!DOCTYPE html>
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'my_password';
$db = 'my_db';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
if (isset($_POST['submit']))
{
$class = $_POST['class'];
$animal = $_POST['animal'];
$food = $_POST['food'];
$given_name = $_POST['given_name'];
$birthday = $_POST['birthday'];
$query = ("INSERT INTO my_table (class, animal, food, given_name, birthday)
VALUES ('$class', '$animal', '$food', '$given_name','$birthday')");
if(mysql_query($query))
{
echo "<script>alert('INSERTED SUCCESSFULLY');</script>";
}
else
{
echo "<script>alert('FAILED TO INSERT');</script>";
}
}
?>
<html>
<head>
<style>
th, td {
padding:15px;
font-weight: normal;
}
</style>
<script>
var modelObject = {
"Mammals": {
"Dog": ["Dog food"],
"Cat": ["Cat food"],
"Tiger": ["Meat"],
"Monkey": ["Banana"],
},
"Reptiles": {
"Snake": ["Rat"],
"Turtle": ["Plant"],
"Lizard": ["Insects"],
"Crocodile": ["Meat"]
},
}
window.onload = function () {
var ANIMAL = document.getElementById("ANIMAL"),
ANIMAL_NAME = document.getElementById("ANIMAL_NAME"),
FOOD = document.getElementById("CRITERIA");
for (var model in modelObject) {
ANIMAL.options[ANIMAL.options.length] = new Option(model, model);
}
ANIMAL.onchange = function () {
ANIMAL_NAME.length = 1;
CRITERIA.length = 1;
if (this.selectedIndex < 1) {
ANIMAL_NAME.options[0].text = "Select Animal Name"
CRITERIA.options[0].text = ""
return;
}
ANIMAL_NAME.options[0].text = "Select Animal Name"
for (var destination in modelObject[this.value]) {
ANIMAL_NAME.options[ANIMAL_NAME.options.length] = new Option(destination, destination);
}
if (ANIMAL_NAME.options.length==2) {
ANIMAL_NAME.selectedIndex=1;
ANIMAL_NAME.onchange();
}
}
ANIMAL.onchange();
ANIMAL_NAME.onchange = function () {
CRITERIA.length = 1;
if (this.selectedIndex < 1) {
SAMPLE_CRITERIA.options[0].text = ""
return;
}
CRITERIA.options[0].text = ""
var cities = modelObject[ANIMAL.value][this.value];
for (var i = 0; i < cities.length; i++) {
CRITERIA.options[CRITERIA.options.length] = new Option(cities[i], cities[i]);
}
if (CRITERIA.options.length==2) {
CRITERIA.selectedIndex=1;
CRITERIA.onchange();
}
}
}
function addRow(){
var destination = document.getElementById("ANIMAL_NAME");
var criteria = document.getElementById("CRITERIA");
var g_name = document.getElementById("GIVEN_NAME");
var bday = document.getElementById("BIRTHDAY");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = '<input type= "text" id= "g_name" name = "g_name">';
row.insertCell(3).innerHTML = '<input type= "text" id= "bday" name= "bday">';
row.insertCell(4).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</head>
<body>
<table class = "table">
<tr>
<td><b>Select Class: </b></td><td>
<select id="ANIMAL" NAME="ANIMAL" size="1" required>
<option value="" selected="selected">Select Class</option>
</select>
</td>
</tr>
<tr>
<tr>
<td>
<b>Select Animal: </b></td><td >
<select ID="ANIMAL_NAME" NAME="ANIMAL_NAME" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="CRITERIA" NAME="CRITERIA" contenteditable="true" style= "display: none" required>
</select>
<input type= "button" id= "add" value="Add Animal" onclick= "Javascript:addRow()">
</td>
</tr>
<div id = "mydata" style = "text-align: center">
<table id = "myTableData">
<tr>
<td style="text-align:center;"><b>Animal Name</b></td>
<td style="text-align:center;"><b>Food</b></td>
<td style="text-align:center;"><b>Given Name</b></td>
<td style="text-align:center;"><b>Birthday</b></td>
</tr>
</div>
</table>
</body>
</html>最佳答案
为了将值数组 POST 到服务器，您可以在 HTML 表单上应用命名约定，如下所示:
<input name="food[]" id="food-1" value="Grass" />
<input name="food[]" id="food-2" value="Fruit" />
这将在服务器端的 $_POST 中生成以下数组:
[
"food" => [
"Grass",
"Fruit"
]
]
之后，您可以循环 $_POST['food'] 数组中的值，并按照您想要的方式将其插入到数据库中。据我所知，到目前为止，您可能想要更改数据库结构以允许多个 food 列值，或者只是连接诸如 implode(',', $_POST['food'] 之类的列值) 使用上面的示例将得到 Grass,Fruit。
一些旁注:
- 请考虑更新您的代码以使用
PDO扩展进行 MySQL 连接。更多内容请参见docs - 页面中有多个具有相同 ID 的元素，例如
id=“生日”。考虑添加索引，例如id="bday-23" - 将 php 变量直接包含在查询中(例如
VALUES ('$class', '$animal', '$food', '$given_name','$birthday'))潜在的 SQL 注入(inject)。请参阅第 1 点 - 使用PDO。 - 考虑在保存数据之前进行一些验证。
希望有帮助。
关于javascript - 如何在数据库php中保存动态下拉列表和文本框中的多个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52828493/