I need an HTML form that does the following:
1. When radio button A is clicked, an invisible div becomes visible and when radio button B is clicked, the div becomes invisible again.
2. This div initially has 3 input text boxes: input1, input2 and input3 and an "ADD" button like this...
input1: [ ]
input2: [ ]
input3: [ ]
[ADD]
3. When you click the "ADD" button, 3 additional input boxes are added to the form like this...
input1: [ ]
input2: [ ]
input3: [ ]
input1: [ ]
input2: [ ]
input3: [ ]
[ADD]
This happens every time the "ADD" button is clicked, so theoretically the form is infinitely expanding.
4. For each group of additional input boxes, there's a "REMOVE" button like this:
input1: [ ]
input2: [ ]
input3: [ ]
input1: [ ]
input2: [ ]
input3: [ ]
[REMOVE]
input1: [ ]
input2: [ ]
input3: [ ]
[REMOVE]
[ADD]
Clicking the "REMOVE" button causes that group of input boxes to disappear (and not be added to the GET variables when the form is submitted).
Note: a REMOVE button is not necessary for the first, initial group of input text boxes, just the new ones that are added.
5. When the form is submitted, the value of all the input boxes is sent as a string of GET variables.
I assume you need to create an array so you can assign unique ids/names to all of the newly-created text boxes, but I'll let you figure that out.
Thanks!