0

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

3 Answers 3

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

3
  • 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, 2014 at 5:42
  • Will give this a go thankyou, seems the cleanest solution for our purposes.
    – 422
    Jan 23, 2014 at 5: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, 2014 at 6:10
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

7
  • 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, 2014 at 5:25
  • 1
    @Birrel the option 6 was not working because there were only 5 blocks of divs Jan 23, 2014 at 5: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, 2014 at 5: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 Jan 23, 2014 at 5: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, 2014 at 5:50
0

You have to use Jquery and css for this purpose.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.