Dynamic Record Form

Hello everybody.

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

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

thanks

Hi edumax. Welcome to the forums. :)

You need JavaScript for this sort of behavior, so your question has bee moved to the JS forum. :)

Hi ralph.m.

Do you have any examples of this, or know any article that talks about this?

Thanks.

This isn't my area, but I know there are lots of form scripts online that have this kind of functionality—like jQuery forms. I'm not sure how easy they are to customize, though.

Another option is to set up your form through Wufoo, a popular form building service. You can set up conditional rules depending on what options the user has selected. Here's a video on how it's done with Wufoo:

http://www.wufoo.com/2010/03/09/good...and-branching/

Thanks for that tip I did not know this site, but I can not use it because it is an exercise of college.

Here's an example of the kind of thing I'm thinking of, using jQuery:

http://stackoverflow.com/questions/1...t-inputs-value

it comes near a bit of what I need.

Maybe if I change the "tr" for a "div".

but my question is how to do it with a combobox.

and when you click register, identify what type of record that is being made.

Thanks for your help, certainly showed me the way.

If someone else wants to help. =]

I got a part of the solution.

I asked a question in stackoverflow and "@TheSmose" showed me this code:

Code HTML4Strict:

---

<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>

---

Code JavaScript:

---

<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>

---

DEMO: http://jsfiddle.net/GUCtC/

That was exactly what I wanted, will help me a lot.
Now we need to identify which form ("div") was filled when you click confirm, but it is now easier.

@Ralph.m once again thank you.

Well, for me the topic can be given as resolved. :)