store dynamically created elements' value to database PHP MySql

Question

newbie here.. I have a form where a user can click a button to add an input text element. I did this using JQuery.

What I want to accomplish is to save the values of the dynamically added textboxes to the database.

I have the following code below but storing to database is not working as it should be.

HTML Code:

<form id='myform' action='save.php' method='POST'>
  <input type='button' value='Add Another User' id='auser'>
  <input type='text' id='user' name='user'>
  <input type='submit' value='Save User/s' name='submit'>
</form>

JQUERY code:

$('#auser').on('click', function() {
   $('#myform').append("<input type='text' id='user' name='user'>");
});

PHP Code(success.php):

<?php
  if (isset($_POST['submit'])){
  $username =  $_POST['user'];
  $qry=$con->prepare('INSERT INTO userslist (username) VALUES (?)')
  $qry->execute(array($username));
  }

?>

thanks in advance for any help..

next typo in <input typ='text' id='user' name='user'> ... change typ to type and then try to capture value again — pes502
– pes502, Commented May 13, 2015 at 7:56
One problem might be, that all your generated input elements have the same name. — Honza Haering
– Honza Haering, Commented May 13, 2015 at 7:58
any ideas how can i make different names for each generated inputs? — Altair Ibn La'Ahad
– Altair Ibn La'Ahad, Commented May 13, 2015 at 8:01

Kevin · Accepted Answer · 2015-05-13 08:03:01Z

Aside from the typos mentioned in the comments above, you'll need to create a grouping name in your HTML form inputs on the user field. So you'll need to change it into:

<input type='text' class='user' name='user[]'>
                                       // ^

Sidenote: I'd suggest just use a class instead.

After that, so you'll also change the JS that spawns multiple textbox fields:

$('#auser').on('click', function() {
   $("<input typ='text' id='class' name='user[]'><br/>").insertBefore('.user').last();
                                      //     ^ need to add those too
});

After that, when you submit the page (the PHP), you'd get an array instead of one value:

$usernames =  $_POST['user']; // this is now an array of usernames

Then in your query, now that its dynamic, you'll need to create the query dynamically too using those PDO placeholders. In the end you'll need these:

if(isset($_POST['submit'])) {
    $usernames =  $_POST['user'];
    $query = 'INSERT INTO userslist (username) VALUES '; // base query
    // dynamically build placeholders
    $placeholders = implode(',', array_fill(0, count($usernames), '(?)'));
    $final_query = $query . $placeholders;
    // the final query would look like
    // INSERT INTO userslist (username) VALUES (?),(?),(?)
    $qry = $con->prepare($final_query); // prepare
    $qry->execute($usernames); // bind the user names
}

Sample Demo

Jai · Accepted Answer · 2015-05-13 08:01:33Z

0

Change to this:

$('#auser').on('click', function() {
   $('#myform').append("<input type='text' class='user' name='user'>");
}); //-------------------------------------^^^^^^^---change the attribute to class

What happens with ids is when browser finds an element with id then it does not look for next element in the page.

So to overcome this issue you should either use unique ids for every element or just change the attribute to class as suggested in the answer.

answered May 13, 2015 at 8:01

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

store dynamically created elements' value to database PHP MySql

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related