如何从数据库PHP中的动态下拉列表和文本框保存多个值
[英]How to save multiple values from dynamic dropdown list and textbox in database php
问题描述
I have a button that adds textboxes together with its food and animal value. 
我有一个按钮，可添加文本框及其食物和动物价值。 However, I have a problem in saving it to the database. 但是，将其保存到数据库时遇到了问题。 Is there a way that I can save all the add chosen animal name, food, birthday and given name. 有没有一种方法可以保存所有添加的所选动物的名字，食物，生日和名字。 Let's say the user chose the dog, cat and monkey. 假设用户选择了狗，猫和猴子。 How will I save all of the information together with the chosen dropdown class and animal into the database as it only saves the last added animal information and not all of the chosen options. 我将如何将所有信息以及所选的下拉菜单类和动物一起保存到数据库中，因为它仅保存最后添加的动物信息，而不保存所有选择的选项。 Please I need help 请帮忙
Kindly go on full page to see how the code works and try to ignore first the error 请进入整页以查看代码如何工作，并尝试首先忽略该错误
<!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 个解决方案
解决方案1
0 2018-10-16 05:41:31
将所有信息发布为一组数组，应用foreach循环，将其与动物列表的所有信息一起插入对应的行中。
解决方案2
0 已采纳 2018-10-16 06:15:20
In order to POST an array of values to server, you can apply a naming convention on the HTML form like follows: 为了将值的数组发布到服务器，您可以在HTML表单上应用命名约定，如下所示：
<input name="food[]" id="food-1" value="Grass" />
<input name="food[]" id="food-2" value="Fruit" />
Which will result in a following array in the $_POST on the server side: 这将导致服务器端$_POST中的以下数组：
[
"food" => [
"Grass",
"Fruit"
]
]
After that, you can loop the values in the $_POST['food'] array and inset it into the DB the way you want. 之后，您可以循环$_POST['food']数组中的值，并以所需的方式将其插入数据库。 From what I can see so far, you might want to change the db structure to allow several food column values or just concatenate those like implode(',', $_POST['food']) which will result in Grass,Fruit using the example above. 从目前为止我所看到的，您可能想要更改db结构以允许多个food列值，或者只是连接诸如implode(',', $_POST['food']) ，这将导致Grass,Fruit使用上面的例子。
Several side notes: 几点注意事项：
- Please consider updating your code to use
PDOextension for MySQL connection.请考虑更新代码以将PDO扩展用于MySQL连接。 More in the docs文档中的更多内容 - You have multiple elements in the page with same ID, eg
id= "bday".页面中有多个具有相同ID的元素，例如id= "bday"。 Consider adding an index, likeid="bday-23"考虑添加索引，例如id="bday-23" - Including the php vars directly into the query (eg
VALUES ('$class', '$animal', '$food', '$given_name','$birthday')) is a potential SQL injection.将php var直接包含到查询中（例如VALUES ('$class', '$animal', '$food', '$given_name','$birthday')）是一种潜在的SQL注入。 See point 1 - usePDO.参见第1点-使用PDO。 - Consider doing some validation before saving data. 考虑在保存数据之前进行一些验证。
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.