Here is our requirement. We use Php Scripting & Mysql as a back end.

We need to add multiple (detail) records for a single invoice in a html page.
First time, the end user should see only only one blank record. when he wants to add one more record, he should click a + icon which displays along with the record, it will allow the user to add one more record. If he clicks the - icon he shoulod be able to remove the
record itself from the screen (html page)

For example,


-------------- ---------------- --------------- ----------- -------------
Product id Product Name Qty Price Total + / -
-------------- ---------------- --------------- ------------- -------------
A106F Box Type 101 10 60 600
-------------- --------------- -------------- -------------- -------------


Appreciate if someone can help me in sharing the PHP code if anyone has already developed.

I'm afraid it's done not by PHP, but by JavaScript, right on the page. You can use DOM provided by user's browser to clone form elements. Then use PHP's wonderful feature of collecting multiple values to arrays.

<script>

function CopyRowContaining( pressedButton )
{
var row  = pressedButton.parentNode;
var submitButton = document.getElementById( 'SubmitButton' );
row.parentNode.insertBefore( row.cloneNode(true), submitButton );
}

function DeleteRowContaining( pressedButton )
{
var row = pressedButton.parentNode;
row.parentNode.removeChild( row );
}

</script>

<form action=whatever.php>

<div>
Product ID <input name='product_IDs[]'>
Product Name <input name='product_names[]'>
<input type=button value='+' onclick='CopyRowContaining(this)'>
<input type=button value='-' onclick='DeleteRowContaining(this)'>
</div>

<input type=submit id=SubmitButton>

</form>

The receiving PHP script will then have 2 arrays: product_IDs and product_names, filled with values.

This article has been dead for over six months. Start a new discussion instead.