Creating Long Forms

How to create a dynamic order form with 100 products

[devitnow]

Hi Eveyone,

In a few weeks I'll start on a new project where I'll need some new skills. I need to build a single order form in PHP that will write to a mySQL database. Normally this would be no problem, but in this case the form will need at least 100 items and the item can change from time to time.

I don't want to even think about a table with a hundred columns, there must be a better way...?..

I'm looking for some direction on how best to set this up. Here are my thoughts, please confirm, shoot holes in it and/or point out potential pitfalls.

I need a products table to store all products. So if there are 100 products, there will be 100 records.

The orders table can then store the order_id of that particular transaction and product_id. This way, if the user submits an order for 20 products, 20 records in the orders table will be created logging the product ids and other foreign keys.

Problem:
I have NO idea how to create a insert form that is dynamic. As products are added and removed from the orders table, the insert form will need to pull in those new records. I'm thinking that arrays might be the solution, but it's an area where I'm sadly still very weak.

Also, this insert form will do multiple record inserts, once again I have never done that before.

Has anyone been down this road before? How did you do it? Where were the challenges? I'm looking forward to tackling this to get some new skills under my belt.

Thanks!
devitnow

[moltar]

You can create form fields in JavaScript if there is a way you can organize them dynamically.

[dmmh]

imo there are 2 ways you could do this: the traditional way, like create a shopping cart, create a temporary holding table for the items the user adds and purge/ move those to the real orders table upon order completion/ payment, whatever you prefer.

Or, you could indeed use javascript, which eliminates the use for a temporary holding table for the orders, but thats not a good idea imo. Javascript is awesome, but simply assuming everybody has it enabled or uses a browser that is capable of it, is denying common sense. I would go for the traditional way, which has been proven, for a good reason.

If you decide to go for Javascript after all, it really isnt that hard. I could post you up some code how I fill HTML selection menu's/ lists if you want to/ need that. Clicking a button will insert another select menu, which would hold your products.

The insertions are pretty straightforward too, simply name all of the recurring elements as an array ( <select name="product[]" size="1"> ) instead of <select name="product" size="1">

Next on the page that actually processes the order, count the amount of instances this element occurs
Something like: $nr_selected_products = count($_POST['product']);

next insert into DB with a loop
something like:

for (i=0; i<$nr_selected_products; i++){
$query = 'INSERT into temp_order_table'.
      " values ('', '$_POST['product'][$i], $_POST['other_element'][$i])";
$result = mysql_query($query) or die ("Error in query: $query " . mysql_error()); 
}

the traditional way is the exact same, its just that the way to add the chosed products to the processing page is slightly different

[dmmh]

hey I cant edit my last post...odd

[grandpa]

This sounds a lot like one of my pages. I have over 300 items on the page, and the user can select 1 of them, all of them, or any number in between.

The items are stored in a db. I pull them out and write a 3 column table, populating each <td></td> with 2 things. The item description AND a form controls - input types. The whole shebang is one big form.

I had to get creative to make this work. Each selection contains a unique name. Here's a snippet from one item:

<input type="text" size="2" name="VARquantity$varcount">
<input type="hidden" name="AddItem$varcount" value="somevalue"><b> Product Description from table </b>

Look at the NAME part of these lines: name="VARquantity$varcount"
name="AddItem$varcount"

The value of $varcount is initialized to 1 just prior to writing my table elements. It gets incremented for each element. So what I end up with is VARquantity1, VARquantity2, VARquantity3... and so on. That gives me a unique name for each form element, which is key to the page working. Note that I did the same thing for the hidden element, using AddItem$varcount. So Varquantity and AddCount will always use the same value of $varcount for each item.

There is a single submit for the entire form.

The completed form would look like this:

<form>
<input type="text" size="2" name="VARquantity$varcount">
<input type="hidden" name="AddItem$varcount" value="somevalue"><b> Product Description from table </b>
..
.. repeated for every item on the page
..

..then..
<input type="submit" name="MyName" value="Continue">
</form>

<add>
This only shows how I set up the form on the page. Obvioulsy, there are things on that page like while loops, foreach loops, counters and arrays that I didn't get into. When the page is initialized I load an array of products to be used later, anywhere I need the products. That simply reduces the number of database reads, in this situation. Also, writing dynamic table columns and rows requires a little bit of planning...

This thread [webmasterworld.com] goes into more detail, including the JavaScript used on the page.
</add>

[devitnow]

Hi everyone,

Thanks for all your ideas and tips. Javascript wasn't even a consideration for me, so that tells me a have a lot of learning and planning to do here.

thanks again.