Michael Peacock - North East freelance web developer, author, entrepreneur

Add another ... with PHP and jQuery

There have been quite a few situations where I've been developing a website, and on a form needed the option to add another set of fields, for example creating an invoice - after completing the fields for the first item on the invoice, you might want to add some more.

After searching the web for possible solutions, I decided to come up with my own, and today, I thought I'd share that.

I'll explain my method using the example of an invoice system, where you would have a form to fill in for an invoices details, but may then want to keep adding new items to the invoice before submitting the form.

The technique is quite simple, you have a hidden field, which stores the number of invoice items that have been added. jQuery is used to increment this number, and to add a new row to the table, using the .append method, inserting the current item number to the item field names, when the add another item button is clicked. The PHP script then inserts a new entry to the invoices table, and keeps a record of the ID. A quick for-loop can then iterate through each of the submitted invoice items, and provided values were actually entered in the text fields, they can be inserted into the database.

HTML

You have a HTML form fields for the first item for the invoice, with a suffix of _1. A hidden field with a value of 1, and a button with an id of addnew to add a new item.

<table id="invoice"> 
	<tr> 
		<th>Quantity</th><th>Item</th><th>Tax rate</th><th>Unit cost</th> 
	</tr> 
	<tr> 
		<td> 
			<input type="text" id="quantity_1" name="quantity_1" /> 
		</td> 
		<td> 
			<input type="text" id="item_1" name="item_1" /> 
		</td> 
		<td> 
			<select id="rate_1" name="rate_1"><option value="1">N/A</option></select> 
		</td> 
		<td> 
			<input type="text" id="cost_1" name="cost_1" /> 
		</td> 
	</tr> 
</table> 
<input type="submit" id="record" name="record" value="Create invoice" />
<input type="button" id="addnew" name="addnew" value="Add new item" /> 
<input type="hidden" id="items" name="items" value="1" /> 

jQuery

The jQuery intercepts the clicking of the addnew button, increments the currentItem counter, creates a new row for the table, adds it by append()ing it to the table, and then updates the hidden fields value.

<script type="text/javascript"> 
	$(document).ready(function() {
		var currentItem = 1;
		$('#addnew').click(function(){
			currentItem++;
			$('#items').val(currentItem);
			var strToAdd = '<tr><td><input type="text" id="quantity_'+currentItem+'" name="quantity_'+currentItem+'" /></td><td><input type="text" id="item_'+currentItem+'" name="item_'+currentItem+'" /></td><td><select id="rate_'+currentItem+'" name="rate_'+currentItem+'"><option value="1">N/A</option></select></td><td><input type="text" id="cost_'+currentItem+'" name="cost_'+currentItem+'" /></td></tr>';
			$('#invoice').append(strToAdd);
			
		});
	});
</script> 	

PHP

Finally, when the form is submitted, our PHP code first creates the invoice record, and then for each new row created, checks to see if the fields were filled in, and if so, creates an invoice item, referencing the invoice ID it is part of.

// after creating an invoice record in the invoice table
$invoice = mysqli_insert_id( $link );
for( $i = 1; $i <= $num; $i++ )
{
	if( isset( $_POST['quantity_' . $i] ) && isset( $_POST['cost_' . $i]) && intval( $_POST['quantity_' . $i] ) > 0 )
	{
		$rate = intval( $_POST['rate_' . $i ] );
		$qty = intval( $_POST['quantity_' . $i] ) ;
		$cost = mysqli_real_escape_string( ( is_numeric( $_POST['cost_' . $i] ) ? $_POST['cost_' . $i] : intval( $_POST['cost_' . $i] ) ) );
		$item = mysqli_real_escape_string( $_POST['item_' . $i ]);
		$sql = "INSERT INTO invoice_items (`invoice`, `quantity`, `item`, `cost`, `tax`) VALUES ( {$invoice}, {$qty}, '{$item}', '{$cost}', '{$rate}' )";
		mysqli_query( $link, $sql ); 
	}
}

JavaScript not enabled?

If the user doesn't have JavaScript enabled (I primarilly use this solution in admin areas, where JavaScript is required), you could either hide the button, and require the user to create the first set of items, and repeat, or alternatively, have the button insert the first set, and then redirect the user to a page where they can add another item.

Donate

Like this code, want to give me some pennies?

Posted by Michael on 22nd Apr 2010 at 11:11