Building Expanding Form Based on Drop-Down Selection

Discussion in 'HTML & Website Design' started by JGross, Oct 12, 2009.

0
  1. #1
    So I am working on a form design project and I have hit a block.

    My objective is to have a series of drop down options. Option 1 enables Option 2 and then Option 2 makes Option 3 visible.

    I am having trouble with the Option 2 to Option 3 transition.

    Here is my code:

    relevant css: 

    .cleanform .off {
	display: none;
}

.cleanform .on {
	display: block;
}
    Code (markup):
    relevant html/javascript: 

        <fieldset>
    	<legend>Cookies</legend>
        <select id="menu1" name="Menu 1">
            <option value="2off" selected="selected" onmouseout="javascript:document.cakeform.menu2.disabled=true">Menu 2 Off</option>
            <option value="2on" onmouseout="javascript:document.cakeform.menu2.disabled=false">Menu 2 On</option>
        </select>
        <select id="menu2" name="Menu 2" disabled="true">
            <option value="3off" selected="selected" onmouseout="javascript:document.cakeform.menu3.class=off">Menu 3 Hidden</option>
            <option value="3on" onmouseout="javascript:document.cakeform.menu3.class=on">Menu 3 Visible</option>
        </select>
        <select id="menu3" name="Menu 3" class="off">
            <option value="newsoff" selected="selected">Newsletter Off</option>
            <option value="newson">Newsletter On</option>
        </select>
    </fieldset>
    Code (markup):
    Now clearly the snippet: javascript:document.cakeform.menu3.class=on wont actually change the class of the next option, I am looking for something that will serve that purpose or another way to achieve this effect.

    It is important to note that I understand how to enable/disable the element. My objective is to make the element invisible in the browser unless the drop-down button for Menu2 is changed to make it visible.

    Thanks!
     
    JGross, Oct 12, 2009 IP
  2. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    not sure if following helps, but you can at least have idea from it.

    What I have done is changed from references to ID. and for assigning a class to any element its property 'className' is to be used.

    
<html>
<head>
<style type='text/css'>
select
{
	float: left;
}
.off
{
	display: none;
}
.on
{
	display: block;
}
</style>

</head>
<body>
	<fieldset>
		<legend>Cookies</legend>
		<select id="menu1" name="Menu 1">
			<option value="2off" selected="selected" onmouseout="javascript:document.getElementById('menu2').disabled=true">Menu 2 Off</option>
			<option value="2on" onmouseout="javascript:document.getElementById('menu2').disabled=false">Menu 2 On</option>
		</select>
		<select id="menu2" name="Menu 2" disabled="true">
			<option value="3off" selected="selected" onmouseout="javascript:document.getElementById('menu3').className='off'">Menu 3 Hidden</option>
			<option value="3on" onmouseout="javascript:document.getElementById('menu3').className='on'">Menu 3 Visible</option>
		</select>
		<select id="menu3" name="Menu 3" class="off">
			<option value="newsoff" selected="selected">Newsletter Off</option>
			<option value="newson">Newsletter On</option>
		</select>
	</fieldset>
</body>
</html>
    HTML:
     
    mastermunj, Oct 16, 2009 IP