2018-10-16 05:30
浏览 161


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>

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'my_password';
$db = 'my_db';

$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);

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')");
echo "<script>alert('INSERTED SUCCESSFULLY');</script>";
 echo "<script>alert('FAILED TO INSERT');</script>";



 th, td {
     font-weight: normal;
   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 = ""
        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.onchange = function () {
        CRITERIA.length = 1;
        if (this.selectedIndex < 1) {
          SAMPLE_CRITERIA.options[0].text = ""
        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) {

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 class = "table">
                <td><b>Select Class: </b></td><td>
                    <select id="ANIMAL"  NAME="ANIMAL" size="1" required>
                        <option value="" selected="selected">Select Class</option>
                <b>Select Animal: </b></td><td >
                    <select ID="ANIMAL_NAME" NAME="ANIMAL_NAME" required>
                        <option value="" selected="selected">Select Model First...</option>
                    <select ID="CRITERIA" NAME="CRITERIA" contenteditable="true" style= "display: none" required>
                    <input type= "button" id= "add" value="Add Animal" onclick= "Javascript:addRow()">
    <div id = "mydata" style = "text-align: center">
        <table id = "myTableData">    
                    <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>

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • doudiandi6967 2018-10-16 06:15

    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" => [

    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:

    1. Please consider updating your code to use PDO extension for MySQL connection. More in the docs
    2. You have multiple elements in the page with same ID, e.g. id= "bday". Consider adding an index, like id="bday-23"
    3. Including the php vars directly into the query (e.g. VALUES ('$class', '$animal', '$food', '$given_name','$birthday')) is a potential SQL injection. See point 1 - use PDO.
    4. Consider doing some validation before saving data.

    Hope that helps.

    解决 无用
    打赏 举报

相关推荐 更多相似问题