Add another item/row on form, insert into DB - php

Question

These two fields are inserted into a database. However, I want to give the user the ability to "Add another item". They should be able to, ideally, add as many items as they like. When they submit the form, the data would be inserted into a mysql table.
How can I go about doing this? Creating 10 extra columns in my database to accommodate extra items being added does not sound realistic nor ideal.
Thanks for the help!
Here is a snippet of my code, where I insert my data into the DB:
if ($stmt = $mysqli->prepare("INSERT items (number, description) VALUES (?, ?)"))
{
$stmt->bind_param("ss", $number, $description);
$stmt->execute();
$stmt->close();
}

Answer 1

This is a pretty complex question, but there are some pretty straightforward solutions. First off, you'll need to change the back-end PHP script that you use to handle having a variable number of items.
For example, right now, you probably have something like:
$item_number = $_POST['item_number'];
$item_description = $_POST['item_description'];
add_item_to_db($item_number, $item_description);
You'll need to change your code to handle the processing of an array of items:
$item_numbers = $_POST['item_number'];
$item_descriptions = $_POST['item_description'];
// validate that count($item_numbers) == count($item_descriptions)
for ($i = 0; $i < count($item_numbers); $i++) {
add_item_to_db($item_numbers[$i], $item_descriptions[$i]);
}
There's quite a bit of error handling that you'll need to perform above that's not shown. If the user enters a different number of item_numbers than item_descriptions, you'll have to determine how to handle that. Also, any of the fields may be blank. Some cases may be errors, others perhaps not.
You'll have to change your HTML:
<input type="text" name="item_number[]" />
<input type="text" name="item_description[]" />
Note the [] in the name. That specifies an array of values for each.
Finally, you'll need to dynamically add a new set of input items on the screen when the user presses the Add another item link. I would recommend using jQuery for this. To accomplish this you would do something like:
jQuery('<input type="text" name="item_number[]" /><input type="text" name="item_description[]" />').appendTo('#someDiv');
Ensure that the new input elements are appended inside the form element. Obviously, there is a lot of code left to be written. This is just a basic example of the concepts.

Answer 2

Just use :
name="item[]"
for item # '
and
name="description[]"
<input type="text" name="item[]" /><input type="text" name="description[]" />
For item description field and in your server side iterate through both of them.
in the front end just create a script that duplicate that node many times.
EDIT
Based in the code you showed it should be something similar to the below code :
if(isset($_POST['item']){
for($i = 0; $i < count($_POST['item']); $i++){
$number = $_POST['item'][$i];
$description= $_POST['description'][$i];
if ($stmt = $mysqli->prepare("INSERT items (number, description) VALUES (?, ?)"))
{
$stmt->bind_param("ss", $number, $description);
$stmt->execute();
$stmt->close();
}
}
In your javascript do like below:
function addRow(){
document.getELementById('container').el.innerHTML += '<input type="text" name="item[]" /><input type="text" name="description[]" />' ;
}
HTML Code:
<form name='myform' >
<div id="container">
<input type="text" name="item[]" /><input type="text" name="description[]" />
</div>
<p onclick="addRow() ;" >Add another item</p>
</form>
I hope this helps.
UPDATE
Try this one :
if(isset($_POST['item']){
if ($stmt = $mysqli->prepare("INSERT items (number, description) VALUES (?, ?)"))
{
for($i = 0; $i < count($_POST['item']); $i++){
$number = $_POST['item'][$i];
$description= $_POST['description'][$i];
$stmt->bind_param("ss", $number, $description);
$stmt->execute();
}
$stmt->close();
}