我有一个按钮，可以把文本框和它的食物和动物价值加在一起。但是，我在保存到数据库时遇到了一个问题。有没有一种方法，我可以保存所有选择的动物名称，食物，生日和名字。假设用户选择了狗、猫和猴子。如何将所有信息连同所选的下拉类和动物一起保存到数据库中，因为它只保存最后添加的动物信息，而不是所有选择的选项。求你了我需要帮助
请翻开整页看看代码是如何工作的，并尝试先忽略错误
<!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>
2条答案
按热度按时间lyr7nygr1#
将所有信息作为一个数组的集合发布，应用foreach循环，将其插入到对应的行中，其中包含动物列表的所有信息。
myss37ts2#
为了将值数组发布到服务器，可以对html表单应用如下命名约定：
这将在
$_POST在服务器端：之后，可以循环
$_POST['food']数组并按所需方式将其插入数据库。从我目前看到的情况来看，您可能希望更改db结构，以允许food列值或只是将这些implode(',', $_POST['food'])这将导致Grass,Fruit使用上面的例子。几个旁注：
请考虑更新您的代码以使用
PDOmysql连接的扩展。文档中有更多页面中有多个元素具有相同的id，例如。
id= "bday". 考虑添加一个索引，比如id="bday-23"将php变量直接包含到查询中（例如。VALUES ('$class', '$animal', '$food', '$given_name','$birthday'))是一个潜在的sql注入。见第1点-使用PDO.考虑在保存数据之前进行一些验证。
希望有帮助。