Build a form dynamically with Ajax, jQuery

Question

I'm building a very small web ERP application with PHP / mySQL / CodeIgniter / jQuery
The Bill/Invoice is built with

current date
client data
etc

Now, I must add products to that new invoice that is being created, without reloading/submitting the page. Each product will have its qtty., description, unit price, subtotal, etc.

I'd like to add each product "row" using Ajax/jQuery.

• How should I build the products form dynamically? I mean, allowing users to add a new product row, or remove product rows from invoice, using Ajax?
• How to sum all the dinamically added "rows" in the form, for getting invoice total?
• And how should I receive and treat all the post data so I can insert the proper invoice record in the invoices table and insert the products records into the products_invoices table?

Thanks a lot. Hope you've understood my question.

EDIT: here you can see a working example of what I want to do
http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2: This jQuery plugin seems to be what I was looking for
http://code.google.com/p/jquery-dynamic-form/

Answer 1

Basically you have to add the form elements to the DOM dynamically as the user keeps adding rows of new data. I believe jquery will be a lot of help in using standard apis for accessing/modifying DOM nodes.

For summing up figures, you have to wrap the numeric fields with special hooks like <span id="value_x">34</span> where x is a counter. After each addition of such new data, iterate through such span elements and sum the values and display them in a field like $("#sumtotal").innerHTML = sum;

After the dynamic updates to the form, when the user clicks the submit button, all the form data will go to the server as normal post data. You must use proper name and id attributes for the data fields that you want to process in the server and update some database table.

Answer 2

Hi, since you are using jQuery, I'd use the jQuery Grid plugin to implement the product rows section.

http://www.trirand.com/blog/

It's highly configurable and flexible, you can use Ajax to populate manually or automatically the rows (it can read directly from a MySQL table with a simple PHP backend) and you have all the facilities to iterate all the rows to post the results to the server, to do pagination (if you need a lot of row, we've used it succesfully with more tha 15.000 rows) and to do additions & other operations.

Hope it helps!