Dynamic Forms

[medlington]

Hi,

Im wanting to create a dynamic form where the user selects an option from a dropdown menu item and then depending upon which item they select a different set of new options / form elements will appear below without submitting the form.

eg,

if the user selected 'house' from the dropdown then several radio buttons would appear underneath with the options of 'door', 'window', 'roof' etc and if they had selected 'car' from the initial dropdown the options that would appear would be 'wheel', 'brake' etc.

Im guessing I need to create all the possible form elements in separate divs that are hidden and then have some script make them appear depending upon which is selected.

So can anyone point me in the right direction for a tutorial on this?

Thanks

[TheGAME1264]

That's done using Javascript and the onchange event handler. jQuery also has a change event handler for this.

JavaScript - Changing Drop Down Lists <-- here's a Javascript example.
So You Need To Fill a Dropdown Dynamically | CSS-Tricks <-- and here's jQuery.

[Webzarus]

there's also the OLD SCHOOL way... using Session Variables.. refreshing the page and displaying more info based on user selection.

Using CSS and a decent host... the page refresh shouldn't even be noticable

[medlington]

Ive managed to get a little stuck with this now and Im sure it should be easy.

Im trying to get it so that I select from a dropdown and then that limits what is in the next dropdown so first I select a room and then I only want tables within that room to be displayed in the next dropdown. Ideally Id like it so that all the possible options were available in the next dropdown but only the relevant ones show so that I can process the info more easily in the next script.

Heres what I have so far but it doesnt seem to do anything. Is it possible to hide more than one element at the same time with the same ID?

This is my Java:

<script type='text/javascript'>

function show(obj, obj2, obj3) {
var el = document.getElementById(obj);
var el2 = document.getElementById(obj2);
var el2 = document.getElementById(obj3);
el.style.display = "block";
el2.style.display = "none";
el3.style.display = "none";
}

</script>

and this is my HTML

<form action="" method="POST">

    <select name="room">
        <option value="" selected="selected"></option>
      <option value="room1" onchange="show('hide1','hide2','hide3')" >tab 1 + 2</option>
      <option value="room2" onchange="show('hide2','hide1','hide3')" >tab 3 + 4 + 5</option>
      <option value="room3" onchange="show('hide3','hide1','hide2')" >tab 6</option>
    </select>
    
    <select name="table">
        <option value="" selected="selected"></option>
      <option value="tab1" id="hide1">tab1</option>
      <option value="tab2" id="hide1">tab2</option>
      <option value="tab3" id="hide2">tab3</option>
      <option value="tab4" id="hide2">tab4</option>
      <option value="tab5" id="hide2">tab5</option>
      <option value="tab6" id="hide3">tab6</option>
    
    </select>
</form>

But as you can see it doesnt do anything: Untitled Document

So where am I going wrong? is it that you cant hide <options> or because I have multiple instances of the same ID? nothing is showing in Firebug.

Can anyone think of a better way to achieve this?

Thanks

[TheGAME1264]

You'll probably find what you're trying to do a lot easier if you use jQuery and data.

jQuery.data() | jQuery API Documentation

Instead of assigning IDs, you could assign data-showlevel="hide1" and then adjust from there.

[iftijafar]

javascript is also use for apply validation and secure the web form. Ajax tool is very powerfull use in web page we can apply each and every validation on our web page.

[TheGAME1264]

When the hell did Javascript have anything to do with securing a web form? What are you talking about (besides suspected post count inflation)?