Question

I have a question and I searched on how to solve this problem, but I found something easy and similar to what I want, it would be the following:

I need a form where the user to select an option in a combobox form fields change.

eg:
selects option 1
Field 1, Field 2 and Field 3 are displayed to fill
selects option 2
Field 4, Field 5 and Field 6 appear to fill

And when submit identifies himself was filled fields of option 1 or option 2

Sample HTML:

<select id="option_selector" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
<div id="options">
    <div id="option1">
        <input type="text" name="input1" value="Input 1" />
        <input type="text" name="input2" value="Input 2" />
        <input type="text" name="input3" value="Input 3" />
    </div>
    <div id="option2">
        <input type="text" name="input4" value="Input 4" />
        <input type="text" name="input5" value="Input 5" />
        <input type="text" name="input6" value="Input 6" />
    </div>
</div>

Anyone know any tutorial or can point me what should I do?

thanks

Answer 1

Did something like this recently at work. This will do what you want.

I made it so that the name of the select matches up to the id of the option div, and the values of the options match up to the ids of the individual section wrappers.

That way, you could slightly alter it to work with multiple optional-selects on a single page.

Demo Here: http://jsfiddle.net/GUCtC/

<select id="option_selector" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
<div id="options">
    <div id="option1">
        <input type="text" name="input1" value="Input 1" />
        <input type="text" name="input2" value="Input 2" />
        <input type="text" name="input3" value="Input 3" />
    </div>
    <div id="option2">
        <input type="text" name="input4" value="Input 4" />
        <input type="text" name="input5" value="Input 5" />
        <input type="text" name="input6" value="Input 6" />
    </div>
</div>
<script type="text/javascript">
        $('#option_selector').change(refresh_inputs);
        refresh_inputs();
        function refresh_inputs() {
            var name = $('#option_selector').attr('name');
            var val = $('#option_selector').val();
            $('#'+name+' div').hide();
            $('#'+val).show();
        }
</script>