0

Morning!

I'm trying to make a login page where our employees can add products to our invoices. I've created a test page for you so you can follow easily and maybe see the idea of this code. On the page our employees can add products to only one invoice right now (because it's a test page) which is invoice_nr 2014002. I want to be able to add multiple products in one form.. I use javascript to add more input fields, but every time I run the query, then it's only inserting the last row.

This is my JavaScript code:

<script type="text/javascript">
function myFunction()
{
var table = document.getElementById("products");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = '<td>Description <input type="text" name="description" value=""></td>';
cell2.innerHTML = '<td>Qty <input type="text" name="qty" value=""></td>';
cell3.innerHTML = '<td>Price <input type="text" name="price" value=""></td>';
cell4.innerHTML = '<td><input type="button" onclick="removeRow(this)" value="Remove"></td>';
}

removeRow = function(el) {
    $(el).parents("tr").remove()       
}
</script>

This is the HTML with the form:

<h1>Add more products to invoice</h1>

<form action="" method="post">
    <table id="products">
        <tr>
            <td>Description <input type="text" name="description" value=""></td>
            <td>Qty <input type="text" name="qty" value=""></td>
            <td>Price <input type="text" name="price" value=""></td>
        </tr>
    </table>

    <br />
    <input type="button" onclick="myFunction()" name="addproduct" value="+ Add product"><br /><br />
    <input type="submit" name="addproduct" value="Submit new products">
</form>

And last, this is the PHP code..:

require_once("conn.php");

if(isset($_POST['addproduct'])){
$description    = addslashes($_POST['description']);
$qty            = (int)$_POST['qty'];
$price          = addslashes($_POST['price']);

$db->query("INSERT INTO products SET
invoice_nr      = 2014002,
description     = '".$description."',
qty             = '".$qty."',
price           = '".$price."'
");
}

And of course, I am aware of the injection on the site, but this is just a basic test page that I've created, because I didn't want to post too much code for you to read otherwise.

I hope it's easy to understand - have a nice day peeps :)

8
  • Can't you just clear the input fields with each submit? Commented Feb 13, 2014 at 14:01
  • I want it to be just one form, one submit button :) Commented Feb 13, 2014 at 14:02
  • I think the problem is that there can only be one value with a certain name sent through POST. I mean, since you add more and more input field with for example name="qty", the previous fields' values don't get sent since they get overwritten by the value for that name in the last field. Commented Feb 13, 2014 at 14:04
  • So how should I do it then? Commented Feb 13, 2014 at 14:04
  • Hmm you may need the element names as array, since you are appending more elements with the same identity within your form by add action. Commented Feb 13, 2014 at 14:06

2 Answers 2

1

You can generate the form with different names, for example:

<script type="text/javascript">
var i = 1;

function myFunction()
{
var table = document.getElementById("products");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = '<td>Description <input type="text" name="description'+i+'" value=""></td>';
cell2.innerHTML = '<td>Qty <input type="text" name="qty'+i+'" value=""></td>';
cell3.innerHTML = '<td>Price <input type="text" name="price'+i+'" value=""></td>';
cell4.innerHTML = '<td><input type="button" onclick="removeRow(this)" value="Remove"></td>';

i++;
}

removeRow = function(el) {
    $(el).parents("tr").remove()       
}
</script>

And then in php you can just iterate through all names:

$i=1; $values = '';
while(isset($_POST['description'.$i])) {
 $i++;
$values .= "($_POST[description$i],$_POST[qty$i],$_POST[price$i])"; // add escaping
    }

mysql_query("insert into table_name (column1,column2,column3,...)
VALUES $values");
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks bro, I will try this when Im back home :)
If I instead of inserting want to update the current rows in one page, how should I do it then?
Add to query ´ON DUPLICATE KEY UPDATE column1=VALUES(column1),column2=VALUES(column2);´ see link
So the query should be looking like this: mysql_query("insert into table_name (column1,column2,column3,...) VALUES $values" ON DUPLICATE KEY UPDATE (column1,column2,column3) VALUES ($values)); Or am I completely wrong on this?
0

For all input give name like

name="description[]"

note the [], so that we can access all values in PHP.

And in PHP get all the posted description and other things in loop like

addslashes($_POST['description'][0]); //for the first product description
addslashes($_POST['description'][1]); //for the second product description if any
addslashes($_POST['description'][2]); //for the third product description if any

3 Comments

Isn't $description = addslashes($_POST['description'][0]); and $description = addslashes($_POST['description'][0]); the same?
So do I have to add every single array number in the query?
count howmany products, then loop through : eg for(i=0, i<count; i++){ // then your php code from line 4 to 13 with array [] }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.