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

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结构以允许多个food列值，或者只是连接诸如implode(',', $_POST['food']) ，这将导致Grass,Fruit使用上面的例子。

几点注意事项：

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

希望能有所帮助。

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

问题描述

2 个解决方案

解决方案1
0 2018-10-16 05:41:31

解决方案2
0 已采纳 2018-10-16 06:15:20

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

问题描述

2 个解决方案

解决方案1 0 2018-10-16 05:41:31

解决方案2 0 已采纳 2018-10-16 06:15:20

解决方案1
0 2018-10-16 05:41:31

解决方案2
0 已采纳 2018-10-16 06:15:20