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
Add a class block to all the block div elements
<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" class="block">
<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" class="block">
<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" class="block">
<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" class="block">
<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" class="block">
<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>
then
jQuery(function () {
var $blocks = $('form .block');
$('#choices').change(function () {
$blocks.slice(0, +this.value || 4).show();
$blocks.slice(+this.value || 4).hide();
})
}).change()
Demo: Fiddle
"I dont want anyone to make this for me..."
Trying to keep this informative, but not doing it for you:
For the select tag at the top, check out onChange here.
Your function call will be something like onChange="myFunction(this.value);"
Based on the value (1, 2, 3, etc...) you can then run through a loop. Something like...
var string = '';
for(var i = 1; i<=value; i++){
string = string.concat('<div id="block-'+i+'">');
for(var j = 1; j <= 3; j++){
string = string.concat('<input id="choice-'+i+'-'+j+'" type="text">');
}
string = string.concat('<div>');
}
And then print out where you need it... $('.container').html(string);
This is using JavaScript / JQuery
You have to use Jquery and css for this purpose.
display:none in css.change() of the select tag2 then display divs like $('#blockID1').show();$('#blockID2').show();$('#otherblockID3').hide();$('#otherblockID4').hide();.....