Say I have a form, with a select option list. That is numbered 4 to 10
Lets say If user chooses 4 ( default )
I then display 4 divs ( with incremental ids for all form elements – appended say choice-4 etc ) Each div has exactly the same 5 form fields in it, all with matching element ID’s based on the select choice made.
If user selected say 6 from the select option, then 6 divs appear with same form field arrangement in each div, and each block of form fields id matches the option chosen.
Ok so thats confused matters… here goes.
<form>
<select id="choices">
<option value="">Please choose</option>
<option value="4">Create 4</option>
<option value="5">Create 5</option>
<option value="6">Create 6</option>
</select>
<div id="block-1">
<input id="choice-1-1" type="text">
<input id="choice-1-2" type="text">
<input id="choice-1-3" type="text">
</div>
<div id="block-2">
<input id="choice-2-1" type="text">
<input id="choice-2-2" type="text">
<input id="choice-2-3" type="text">
</div>
<div id="block-3">
<input id="choice-3-1" type="text">
<input id="choice-3-2" type="text">
<input id="choice-3-3" type="text">
</div>
<div id="block-4">
<input id="choice-4-1" type="text">
<input id="choice-4-2" type="text">
<input id="choice-4-3" type="text">
</div>
<div id="block-5">
<input id="choice-5-1" type="text">
<input id="choice-5-2" type="text">
<input id="choice-5-3" type="text">
</div>
<input type="submit" id="submit" name="submit" value="Submit">
</form>
SO when page loads, none of those divs are displayed. They click 5 in select dropdown, ( which doesnt have to be part of form ) and the corresponding divs are displayed.
The pattern of form elements is exactly the same for every block. All that needs to change is the ids obviously.
I dont want anyone to make this for me, but I would like some assistance please in the most robust economical method of coding this, that can use jQuery or be a php solution ( preferred )
Cheers