How to save multiple data from dynamically added text-boxes (JavaScript) into MySQL database?

Question

I have been trying for this but no success. I am using PHP, HTML, JavaScript, and MySQL. Here is my HTML code:

<div id="Author">
    <LI>Author</LI> 
    <input type = "text" name="Author[]" value = "1. "/>
    <input type="button" value="+" id="Authorbutton" onclick="addAuthor()" />
</div>

If add button is clicked, another textbox will appear and user and put in another name. Here is my JavaScript:

var counter3 = 0;
function addAuthor() {
    // Get the main Div in which all the other divs will be added
    var mainContainer = document.getElementById('Author');

    // Create a new div for holding text and button input elements
    var newDiv = document.createElement('div');

    // Create a new text input
    var newText = document.createElement('input');
    newText.type = "text";
    //var i = 1;
    newText.name = "Author[]";
    newText.value = counter3 + 2 + ". ";

    //Counter starts from 2 since we already have one item
    //newText.class = "input.text";
    // Create a new button input
    var newDelButton = document.createElement('input');
    newDelButton.type = "button";
    newDelButton.value = "-";

    // Append new text input to the newDiv
    newDiv.appendChild(newText);
    // Append new button input to the newDiv
    newDiv.appendChild(newDelButton);
    // Append newDiv input to the mainContainer div
    mainContainer.appendChild(newDiv);
    counter3++;
    //i++;

    // Add a handler to button for deleting the newDiv from the mainContainer
    newDelButton.onclick = function() {
        mainContainer.removeChild(newDiv);
        counter3--;
    }
}

Here is my PHP code:

if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db($database, $con);



$sql="INSERT INTO savetest (type, number)
VALUES
('$_POST[type]','$_POST[Author]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";

mysql_close($con);
echo "Thank you for submitting your details!";

I heard a lot of people can get this to work by using arrays, but the data I stored in the database is Array. It does not matter how many textboxes I've created, just Array.

Am I using the correct approach? Should I save this array of data in one database fields?

GeorgioCZY, I've read this over three times and I still can't figure out what you are asking. Do you want another text field to appear? Is it not appearing? Also, your code has several formatting issues. Please revise and it will be much easier to help. — Brendon Cheves, Apr 19 '12 at 22:52
if you want to save all data to one single field you need to implode data implode(',', $_POST[Author]). — Nisanth Kumar, Apr 20 '12 at 09:50
http://stackoverflow.com/questions/1978438/save-php-array-to-mysql — Nisanth Kumar, Apr 20 '12 at 09:55
@BrendonCheves My javascript adding textbox already worked, I just want to save all input into Mysql. right now, it only saves the first input. If i use array, only text "array" will be saved. My question is how to save all these data into mysql. I am not sure if I should save all these textbox data into one single field. — GeorgioCZY, Apr 20 '12 at 13:33

score 3 · Accepted Answer · answered Apr 20 '12 at 09:40

3

if (!$con){
   die('Could not connect: ' . mysql_error());
}

mysql_select_db($database, $con);

$authors = $_POST['Author'];
foreach($authors as $author) :
    $sql="INSERT INTO savetest (type, number) VALUES ('{$_POST['type']}','{$author}')";

    if (!mysql_query($sql,$con)){
       die('Error: ' . mysql_error());
    }
endforeach;

answered Apr 20 '12 at 09:40

Nisanth Kumar

5,667
8
33
43

Can I just point out that although this answers your question, you should never put user input straight into a sql query. See http://stackoverflow.com/questions/60174/how-to-prevent-sql-injection-in-php – Chris Payne May 15 '13 at 08:20

How to save multiple data from dynamically added text-boxes (JavaScript) into MySQL database?

1 Answers1

Linked