Display Multiple DIVS ( with form elements inside ) based on select choice

Question

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

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

"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

edited May 23 '17 at 11:49

Community

1
1

answered Jan 23 '14 at 05:24

Birrel

4,754
6
38
74

1

Depending on how much content you have within your forms, this method is nice in that it only creates the exact number of divs that you need - no more and no less. Each time a new number is selected, the HTML within the `.container` div is re-written to the required size. Another method would also be to have one div set up, and then copy the contents, append it within the parent, and then go through and change the `id` of each child. `$('.container').child().attr("id", "...name...");` – Birrel Jan 23 '14 at 05:42
Will give this a go thankyou, seems the cleanest solution for our purposes. – 422 Jan 23 '14 at 05:43
Yeah looking at the other option by Arun, which works. It unfortunately would initially create possibly 400 lines of code ( due to the complexity of forms ) so will have a bash at firing it thru a loop and using onChange – 422 Jan 23 '14 at 06:10

score 0 · Accepted Answer · answered Jan 23 '14 at 05:19

0

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

answered Jan 23 '14 at 05:19

Arun P Johny

384,651
66
527
531

This doesn't work when selecting 6. Also, the person asking this question specified they *DON'T* want a full solution/answer. – Birrel Jan 23 '14 at 05:25
1

@Birrel the option 6 was not working because there were only 5 blocks of divs – Arun P Johny Jan 23 '14 at 05:33
Thanks, nice solution. I was hoping to get away from a whole heap of repeated code. But will have a play with it and it may be a goer ( voted up ) – 422 Jan 23 '14 at 05:45
1

@422 the above solution has a drawback... of you select 4 then enter data for all elements then select 6 what will happen for the already entered data – Arun P Johny Jan 23 '14 at 05:47
1

@ArunPJohny the entered value will be there as he is not removing the divs but just hiding it which will not clear the values. – krishna Jan 23 '14 at 05:50
@krishna sorry I was commenting about the answer from Birrel... this is my answer – Arun P Johny Jan 23 '14 at 06:02
Just trying it out now, I hope the entered data doesnt get lost if the user opts to select 6 having chosen 4 that would piss you off huh – 422 Jan 23 '14 at 06:02

krishna · Answer 3 · 2014-01-23T05:43:28.047

0

You have to use Jquery and css for this purpose.

hide all divs using display:none in css
Then in jquery use .change() of the select tag
Check the value of select and display corresponding divs say you have selected 2 then display divs like $('#blockID1').show();$('#blockID2').show();
Hide other divs using $('#otherblockID3').hide();$('#otherblockID4').hide();.....

edited Jan 23 '14 at 05:43

answered Jan 23 '14 at 05:32

krishna

4,069
2
29
56

Display Multiple DIVS ( with form elements inside ) based on select choice

3 Answers3