How to allow users to specify the amount of items on my form?

richieboy · 9 Mar 2008 at 00:18

I had an order form which had 5 parts that repeated themselves to allow a person to order up to 5 different items. I originally did it by having $item1, $quantity1, $type1, $item2, $quantity2...etc hardcoded into both the PHP processor and the HTML form (e.g. values of form elements were item1, quantity1, etc).

I have now re-coded it so it uses arrays for both the HTML form (the parts that repeat are in the array) and the PHP processor (mainly thanks to you guys), and all is working fine now (still need to output the stuff from the arrays, but there's another thread for that!). Both currently use a variable $itemamount = 5 which is hardcoded into the script.

The only thing is, now i have my arrays i was wondering if i can make it so users can somehow input/specify how many items they wish to add? Ideally i don't want to use POST as the form using the arrays has an "if POST" thing that it could mess up. The other slightly problem is that the page is included in a larger CMS type system which means using GET is impossible as you can't get the value into the URL (e.g. by using form.php?itemamount=3)...so i wondered if theres another way of doing this?

Basically i either want a seperate page that asks the user how many items he/she wants to order, which then forwards them onto form.php that will give them the form to fill in. Alternatively, if all the code was on the form page and they (by default) have 1 item field and could then somehow click "Add Item..." if they wished to add more and more as many times as they want?

So, any ideas? I'm a little stuck so appreciate any help!

LazyManc · 9 Mar 2008 at 13:17

Assuming you already have a loop that prints an "item" section of the form, then just specify the number of items in the url and grab it using $_GET...

mydomain.com/myForm.php?items=5

Code:

if(isset($_GET['items'])) {
  $formItems = intval($_GET['items']);
} else {
  // default number of items
  $formItems = 3;
}

for($i = 1; $i <= $formItems; $i++) {
  // print your item section
}

You could also have a button that adds an extra item section to the page using javascript.

richieboy · 9 Mar 2008 at 14:03

Thanks for your response, unfortunately as i mentioned the form is included in another page (am using a Wiki based PHP system called DokuWiki, and have had to include the PHP form as otherwise its very restricted) and so using GET doesn't seem to work when using the form in Dokuwiki, e.g.

http://domain.com/direct/path/to.php?item=3 - works fine

But using the page

http://domain.com/doku.php?=form (and then adding) ?item=3 on the end doesnt work as DokuWiki doesnt know what to do with it?

I'd really like to do the Javascript option if thats possible, how can i do that, what code would be used?

Thanks again.

marc2003 · 9 Mar 2008 at 14:21

Code:

?item=3 on the end doesnt work

but &item=3 would.

Pulseammo · 9 Mar 2008 at 16:54

richieboy said:
Alternatively, if all the code was on the form page and they (by default) have 1 item field and could then somehow click "Add Item..." if they wished to add more and more as many times as they want?

So, any ideas? I'm a little stuck so appreciate any help!

You'd need to use some kind of javascript to do the "Add a form element". If you use the mootools library you can use the "injectBefore" and "injectAfter" methods on the Element class. If you build new Elements, then inject them after other named elements on your form, that would work out.

I don't have a good example for form elements. But this example here (click jscode near the top right), basically pulls data off a server, builds elements based on the info pulled, and injects them into a page. The principle is the same, only you would have a link/image/whatever with an onclick event that would call a function to do the Element injection stuff. (IOW, just use the example as an example of how to inject, ignore the JSON/AJAX stuff completely).

http://demos.mootools.net/Json.Remote

also (this one uses a premade element and moves it):

http://docs.mootools.net/Native/Element.js#Element.injectBefore

P.S I think IE6 can get ratty about you injecting certain form elements though. (Selects in particular).