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></div>
In order to POST an array of values to server, you can apply a naming convention on the HTML form like follows:
<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:
[
"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. 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.
Several side notes:
PDO extension for MySQL connection. More in the docsid= "bday". Consider adding an index, like id="bday-23"VALUES ('$class', '$animal', '$food', '$given_name','$birthday')) is a potential SQL injection. See point 1 - use PDO.Hope that helps.
Post all information as a set of an array, apply a foreach loop, insert it on corresponding row with all informations for the animal list.