Question

我有一个按钮，可添加文本框及其食物和动物价值。但是，将其保存到数据库时遇到了问题。有没有一种方法可以保存所有添加的所选动物的名字，食物，生日和名字。假设用户选择了狗，猫和猴子。我将如何将所有信息以及所选的下拉菜单类和动物一起保存到数据库中，因为它仅保存最后添加的动物信息，而不保存所有选择的选项。请我帮忙

请继续浏览整页，以查看代码的工作原理，并尝试首先忽略该错误

<!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>

Answer 1

将所有信息发布为一组数组，应用foreach循环，将其插入具有动物列表所有信息的对应行。

Answer 2

为了将值数组发布到服务器，您可以在HTML表单上应用命名约定，如下所示：

<input name="food[]" id="food-1" value="Grass" />
<input name="food[]" id="food-2" value="Fruit" />

这将在服务器端$_POST中导致以下数组：

[
    "food" => [
        "Grass",
        "Fruit"
    ]
]

此后，您可以循环$_POST['food']数组中的值并将其按所需的方式插入到DB中。从目前为止我所看到的，您可能想要更改db结构以允许多个food列值，或者仅将诸如implode(',', $_POST['food'])之类的值连接起来，这将使用上面的示例生成Grass,Fruit。

几个注意事项：

请考虑更新您的代码以将PDO扩展名用于MySQL连接。 docs
页面中有多个具有相同ID的元素，例如id= "bday"。考虑添加一个索引，例如id="bday-23"
将php vars直接包含在查询中（例如VALUES ('$class', '$animal', '$food', '$given_name','$birthday')）是潜在的SQL注入。请参阅第1点-使用PDO。
考虑在保存数据之前进行一些验证。

希望有帮助。

如何从数据库PHP中的动态下拉列表和文本框保存多个值

2 个答案: