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>
