javascript - 如何从数据库php中的动态下拉列表和文本框中保存多个值
问题描述
我有一个按钮,可以添加文本框及其食物和动物价值。但是,我在将其保存到数据库时遇到了问题。有没有办法可以保存所有添加选择的动物名称、食物、生日和名字。假设用户选择了狗、猫和猴子。我如何将所有信息连同所选的下拉类和动物一起保存到数据库中,因为它只保存最后添加的动物信息,而不是所有选择的选项。请我需要帮助
请继续阅读完整页面以查看代码的工作原理并尝试首先忽略错误
<!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>
解决方案
将所有信息作为一组数组发布,应用 foreach 循环,将其插入相应行,其中包含动物列表的所有信息。
推荐阅读
- ruby-on-rails - 如何下载带有 id 参数的文件?
- javascript - 如何从一个数组中不包含在第二个数组中的对象最好地创建一组对象
- python - 双向二叉搜索树?
- windows - WaitForSingleObject() 中的早期唤醒...?
- python - 需要如何使用 djangorestframework-api-key 的示例
- domain-driven-design - 在哪里验证唯一的 AggregateRoot 属性?
- vue.js - 如何将 vue 与自定义路由集成到现有的常规网站中?
- javascript - 我如何让特定的框在点击它们时改变颜色?
- .net - 如何在 .NET 4.7 中定义具有命名字段的元组?
- java-8 - JDK 8:ConcurrentHashMap.compute 似乎偶尔允许多次调用重新映射函数