We have an online form so that our registered (b2b) customers can order our products online. These products have an attribute: size.
There is a database in the back-end, with the product information e.g. name, price, attribute (e.g. size), as well as customer details and order history, etc.
Initially the form starts with one row (but the form allows more rows to be added if desired) When a customer selects a new product from a dropdown box, the fields for that product appear dynamically. The customer can then select the required quantities for each size field (via dropdown boxes), and the total amount is calculated dynamically. The total amount increases dynamically as more products are selected and added to the form, and when the customer submits the order, the total amount of the order is recorded in the database.
Each attribute (size field) has an associated price, and as each field gets populated by the customer (by selecting a quantity), the "total amount" gets updated.
We are using AJAX & JQUERY for this web application. The form starts off with one row, and the user/customer can select a product, fill-in the quantities, and then add new rows if he wishes to add more products to his order form.
We have 3 main requirements:
1) There is a problem when many rows are added and then deleted deliberately, some functionality disappears and we believe there is an issue with the code. Some formatting also needs to be fixed (positioning of certain links).
When a user clicks on "Add new product", a row is added, and a link dynamically appears to remove that row (product). And when a user clicks on that link, the row is removed. However, after adding many rows and then subsequently deleting them, other rows get affected ("remove row" link disappears from other rows). This needs to be fixed.
2) Currently, we have dropdown boxes for each size field. The user selects a quantity (1 to 30) from the list, and the total amount gets updated. What we need is a dynamic dropdown box to only show initially 10 options: 1 to 10, and a <show more> option, and if this option gets selected, then display 20 numbers: 1, 2, 3, ..... 20, <show more>. If the user selects "show more" again, then display 30 numbers: 1, 2, 3 .... 30. And so on, until 100.
3) The content of the HTML form should be sent by email to us AND the customer. We used to have this functionality, but due to changes in the code we are getting an email without the rows that were added to the form. Currently, the email only includes the "total amount" as well as the "observations" field.
The solution must work on all browsers (and extensive testing should be made especially in Internet Explorer).
On a final note, the speed by which products are added (and quantities are selected) should NOT affect the result of the total amount, this should always reflect the correct value. At present, we have achieved this. It is always important that the "total amount" value reflects correctly (whether products are added or deleted).
If there are any experienced AJAX and JQUERY coders, please bid on this project to correct this issue (it shouldn't be too hard to tackle).