JavaScript Form Events: OnClick Not Working

[alexjewell]

I have a form for a school's helpdesk submissions. Depending on changes (specifically, 3) in the form's data, events occur. The 3 main changes are:

1. If a checkbox to specify a room is checked, an input for that room appears
2. If one school campus is selected (which it is by default), a select box appears to choose which school
3. If "computer" is selected as the problem type (radio button), a select box appears to choose which type of computer

Only the second item above works (school campus --> select box). Both the first and third are dependent upon checkboxes/radio buttons, objects that appear simple to me in JavaScript, but always cause the most trouble.

Here is the javascript, along with corresponding form elements. If you need all of the form's HTML, just let me know. The form name and id are both "new_helpdesk" :

function panicRoom(){
	var ifRoom = document.getElementById('ifRoom');
	var chkRoom = document.new_helpdesk.chkRoom;
	if(chkRoom.checked){
		ifRoom.style.display = 'block';
	}
	else{
		ifRoom.style.display = 'none';
	}
}

function clubsideRoad(){
	var ifLY = document.getElementById('ifLY');
	var campusSel = document.new_helpdesk.campus.value;
	if(campusSel == 'LY'){
		ifLY.style.display = 'block';
	}
	else{
		ifLY.style.display = 'none';
	}
}

function compType(radSel){
	var ifComputer = document.getElementById('ifComputer');
	if(radSel == true){
		ifComputer.style.display = 'block';
	}
	else{
	
	}	ifComputer.style.display = 'none';
}

<p class="left"><input type="checkbox" name="chkRoom" onclick="panicRoom();" /> Specify Room:</p>
<div id="ifRoom">
     <p><input type="text" name="room" /></p>
</div>

<p class="left"><label for="campus">Campus:</label></p>
<p>
	<select name="campus" onchange="clubsideRoad();">
		<option value="LY">Lyndhurst</option>
		<option value="GM">Gates Mills</option>
		<option value="UC">Gries Center</option>
	</select>
</p>
<div id="ifLY">
	<p class="left"><label for="school">School:</label></p>
	<p>
		<select name="school">
			<option value="lower">Lower</option>
			<option value="middle">Middle</option>
			<option value="administration">Administration</option>
			<option value="other">Other</option>
		</select>
	</p>
</div>

<p class="left"><label for="problem_type">Problem Type:</label></p>
<p class="left">
	<input type="radio" name="problem_type" value="computer" onclick="compType(true);" /> Computer:<br />
	<input type="radio" name="problem_type" value="network logon" onclick="compType(false);" /> Network Logon<br />
	<input type="radio" name="problem_type" value="browser filtering" onclick="compType(false);" /> Browser Filtering<br />
	<input type="radio" name="problem_type" value="dvd/vhs player" onclick="compType(false);" /> DVD/VHS Player<br />
	<input type="radio" name="problem_type" value="computer monitor" onclick="compType(false);" /> Computer Monitor<br />
	<input type="radio" name="problem_type" value="projector/smart board" onclick="compType(false);" /> Projector/Smart Board<br />
	<input type="radio" name="problem_type" value="lost information" onclick="compType(false);" /> Lost Information<br />
	<input type="radio" name="problem_type" value="email" onclick="compType(false);" /> Email<br />
	<input type="radio" name="problem_type" value="network connection/wireless" onclick="compType(false);" />Network Connection/Wireless<br />
	<input type="radio" name="problem_type" value="printers" onclick="compType(false);" /> Printers<br />
	<input type="radio" name="problem_type" value="software request" onclick="compType(false);" /> Software Request
</p> 
<div id="ifComputer">
	<p class="left"><label for="computer">Computer Type:</label></p>
	<p>
		<select name="computer">
			<option value="desktop">Desktop</option>
			<option value="laptop/netbook">Laptop/Netbook</option>
			<option value="tablet">Tablet</option>
		</select>
	</p>
</div>

Note: ID's #ifRoom and #ifComputer are set to display: none in the CSS.

I've checked my syntax over and over, but I can't see anything clearly wrong with it. Any help is appreciated!

[Nile]

Here, some things were changed because I dont have all the code:

<script type="text/javascript">
function panicRoom(me){
	var ifRoom = document.getElementById('ifRoom');
	if(me.checked){
		ifRoom.style.display = 'block';
	}
	else{
		ifRoom.style.display = 'none';
	}
}

function clubsideRoad(me){
	var ifLY = document.getElementById('ifLY');
	if(me.value == 'LY'){
		ifLY.style.display = 'block';
	}
	else{
		ifLY.style.display = 'none';
	}
}

function compType(radSel){
	var ifComputer = document.getElementById('ifComputer');
	ifComputer.style.display = (radSel) ? 'block' : 'none';
}
window.onload = function(){
	panicRoom(document.getElementById('problem').elements['chkRoom']);
	clubsideRoad(document.getElementById('problem').elements['campus']);
	for (var i=0; i < document.getElementById('problem').elements['problem_type'].length; i++){
		if (document.getElementById('problem').elements['problem_type'][i].checked){
			var checkedT = document.getElementById('problem').elements['problem_type'][i].value;
		}
	}
	if(checkedT == "computer"){
		compType(true);
	} else {
		compType(false);
	}
}
</script>
<form id="problem">
<p class="left"><input type="checkbox" name="chkRoom" onclick="panicRoom(this);" /> Specify Room:</p>
<div id="ifRoom" style="display:none">
     <p><input type="text" name="room" /></p>
</div>
<p class="left"><label for="campus">Campus:</label></p>
<p>
	<select name="campus" onchange="clubsideRoad(this);">
		<option value="LY">Lyndhurst</option>
		<option value="GM">Gates Mills</option>
		<option value="UC">Gries Center</option>
	</select>
</p>
<div id="ifLY">
	<p class="left"><label for="school">School:</label></p>
	<p>
		<select name="school">
			<option value="lower">Lower</option>
			<option value="middle">Middle</option>
			<option value="administration">Administration</option>
			<option value="other">Other</option>
		</select>
	</p>
</div>
<p class="left"><label for="problem_type">Problem Type:</label></p>
<p class="left">
	<input type="radio" name="problem_type" value="computer" onclick="compType(true);" /> Computer:<br />
	<input type="radio" name="problem_type" value="network logon" onclick="compType(false);" /> Network Logon<br />
	<input type="radio" name="problem_type" value="browser filtering" onclick="compType(false);" /> Browser Filtering<br />
	<input type="radio" name="problem_type" value="dvd/vhs player" onclick="compType(false);" /> DVD/VHS Player<br />
	<input type="radio" name="problem_type" value="computer monitor" onclick="compType(false);" /> Computer Monitor<br />
	<input type="radio" name="problem_type" value="projector/smart board" onclick="compType(false);" /> Projector/Smart Board<br />
	<input type="radio" name="problem_type" value="lost information" onclick="compType(false);" /> Lost Information<br />
	<input type="radio" name="problem_type" value="email" onclick="compType(false);" /> Email<br />
	<input type="radio" name="problem_type" value="network connection/wireless" onclick="compType(false);" />Network Connection/Wireless<br />
	<input type="radio" name="problem_type" value="printers" onclick="compType(false);" /> Printers<br />
	<input type="radio" name="problem_type" value="software request" onclick="compType(false);" /> Software Request
</p> 
<div id="ifComputer">
	<p class="left"><label for="computer">Computer Type:</label></p>
	<p>
		<select name="computer">
			<option value="desktop">Desktop</option>
			<option value="laptop/netbook">Laptop/Netbook</option>
			<option value="tablet">Tablet</option>
		</select>
	</p>
</div>
</form>

[Nile]

Any updates?

[alexjewell]

Still isn't working. Here's my code:

function panicRoom(me){
	var ifRoom = document.getElementById('ifRoom');
	if(me.checked){
		ifRoom.style.display = 'block';
	}
	else{
		ifRoom.style.display = 'none';
	}
}

function clubsideRoad(me){
	var ifLY = document.getElementById('ifLY');
	if(me.value == 'LY'){
		ifLY.style.display = 'block';
	}
	else{
		ifLY.style.display = 'none';
	}
}

function compType(radSel){
	var ifComputer = document.getElementById('ifComputer');
	ifComputer.style.display = (radSel) ? 'block' : 'none';
}

window.onload = function(){
	panicRoom(document.getElementById('new_helpdesk').elements['chkRoom']);
	clubsideRoad(document.getElementById('new_helpdesk').elements['campus']);
	for (var i=0; i < document.getElementById('new_helpdesk').elements['problem_type'].length; i++){
		if (document.getElementById('new_helpdesk').elements['problem_type'][i].checked){
			var checkedT = document.getElementById('new_helpdesk').elements['problem_type'][i].value;
		}
	}
	if(checkedT == "computer"){
		compType(true);
	} else {
		compType(false);
	}
}

	<form name="new_helpdesk" id="new_helpdesk" method="post" action="#">
		<fieldset>
			<legend>New HelpDesk Request:</legend>
			<p class="left"><label for="name">Name:</label></p><p><input type="text" name="name" /></p>
			<div class="clear_both"></div>
			<p class="left"><label for="email">Email:</label></p><p><input type="text" name="email" /></p>
			<div class="clear_both"></div>
			<p class="left"><label for="department">Department(s):</label></p><p><input type="text" name="department" /></p>
			<div class="clear_both"></div>
			<p class="left"><input type="checkbox" name="chkRoom" onclick="panicRoom(this);" /> Specify Room:</p>
			<div class="clear_both"></div>
			<div id="ifRoom">
				<p><input type="text" name="room" /></p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="campus">Campus:</label></p>
			<p>
				<select name="campus" onchange="clubsideRoad(this);">
					<option value="LY">Lyndhurst</option>
					<option value="GM">Gates Mills</option>
					<option value="UC">Gries Center</option>
				</select>
			</p>
			<div class="clear_both"></div>
			<div id="ifLY">
				<p class="left"><label for="school">School:</label></p>
				<p>
					<select name="school">
						<option value="lower">Lower</option>
						<option value="middle">Middle</option>
						<option value="administration">Administration</option>
						<option value="other">Other</option>
					</select>
				</p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="problem_type">Problem Type:</label></p>
			<div class="clear_both"></div>
			<p class="left">
				<input type="radio" name="problem_type" value="computer" onclick="compType(true);" /> Computer:<br />
				<input type="radio" name="problem_type" value="network logon" onclick="compType(false);" /> Network Logon<br />
				<input type="radio" name="problem_type" value="browser filtering" onclick="compType(false);" /> Browser Filtering<br />
				<input type="radio" name="problem_type" value="dvd/vhs player" onclick="compType(false);" /> DVD/VHS Player<br />
				<input type="radio" name="problem_type" value="computer monitor" onclick="compType(false);" /> Computer Monitor<br />
				<input type="radio" name="problem_type" value="projector/smart board" onclick="compType(false);" /> Projector/Smart Board<br />
				<input type="radio" name="problem_type" value="lost information" onclick="compType(false);" /> Lost Information<br />
				<input type="radio" name="problem_type" value="email" onclick="compType(false);" /> Email<br />
				<input type="radio" name="problem_type" value="network connection/wireless" onclick="compType(false);" />Network Connection/Wireless<br />
				<input type="radio" name="problem_type" value="printers" onclick="compType(false);" /> Printers<br />
				<input type="radio" name="problem_type" value="software request" onclick="compType(false);" /> Software Request
			</p> 
			<div class="clear_both"></div>
			<div id="ifComputer">
				<p class="left"><label for="computer">Computer Type:</label></p>
				<p>
					<select name="computer">
						<option value="desktop">Desktop</option>
						<option value="laptop/netbook">Laptop/Netbook</option>
						<option value="tablet">Tablet</option>
					</select>
				</p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="description">Problem Description:</label></p><p><textarea name="description"></textarea></p>
			<div class="clear_both"></div>
			<p><input type="submit" value="Submit" id="helpSub" /></p>
			<div class="clear_both"></div>
		</fieldset>
	</form>

[Nile]

The following works fine for me.

<script type="text/javascript">
function panicRoom(me){
	var ifRoom = document.getElementById('ifRoom');
	if(me.checked){
		ifRoom.style.display = 'block';
	}
	else{
		ifRoom.style.display = 'none';
	}
}

function clubsideRoad(me){
	var ifLY = document.getElementById('ifLY');
	if(me.value == 'LY'){
		ifLY.style.display = 'block';
	}
	else{
		ifLY.style.display = 'none';
	}
}

function compType(radSel){
	var ifComputer = document.getElementById('ifComputer');
	ifComputer.style.display = (radSel) ? 'block' : 'none';
}

window.onload = function(){
	panicRoom(document.getElementById('new_helpdesk').elements['chkRoom']);
	clubsideRoad(document.getElementById('new_helpdesk').elements['campus']);
	for (var i=0; i < document.getElementById('new_helpdesk').elements['problem_type'].length; i++){
		if (document.getElementById('new_helpdesk').elements['problem_type'][i].checked){
			var checkedT = document.getElementById('new_helpdesk').elements['problem_type'][i].value;
		}
	}
	if(checkedT == "computer"){
		compType(true);
	} else {
		compType(false);
	}
}
</script>
	<form name="new_helpdesk" id="new_helpdesk" method="post" action="#">
		<fieldset>
			<legend>New HelpDesk Request:</legend>
			<p class="left"><label for="name">Name:</label></p><p><input type="text" name="name" /></p>
			<div class="clear_both"></div>
			<p class="left"><label for="email">Email:</label></p><p><input type="text" name="email" /></p>
			<div class="clear_both"></div>
			<p class="left"><label for="department">Department(s):</label></p><p><input type="text" name="department" /></p>
			<div class="clear_both"></div>
			<p class="left"><input type="checkbox" name="chkRoom" onclick="panicRoom(this);" /> Specify Room:</p>
			<div class="clear_both"></div>
			<div id="ifRoom">
				<p><input type="text" name="room" /></p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="campus">Campus:</label></p>
			<p>
				<select name="campus" onchange="clubsideRoad(this);">
					<option value="LY">Lyndhurst</option>
					<option value="GM">Gates Mills</option>
					<option value="UC">Gries Center</option>
				</select>
			</p>
			<div class="clear_both"></div>
			<div id="ifLY">
				<p class="left"><label for="school">School:</label></p>
				<p>
					<select name="school">
						<option value="lower">Lower</option>
						<option value="middle">Middle</option>
						<option value="administration">Administration</option>
						<option value="other">Other</option>
					</select>
				</p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="problem_type">Problem Type:</label></p>
			<div class="clear_both"></div>
			<p class="left">
				<input type="radio" name="problem_type" value="computer" onclick="compType(true);" /> Computer:<br />
				<input type="radio" name="problem_type" value="network logon" onclick="compType(false);" /> Network Logon<br />
				<input type="radio" name="problem_type" value="browser filtering" onclick="compType(false);" /> Browser Filtering<br />
				<input type="radio" name="problem_type" value="dvd/vhs player" onclick="compType(false);" /> DVD/VHS Player<br />
				<input type="radio" name="problem_type" value="computer monitor" onclick="compType(false);" /> Computer Monitor<br />
				<input type="radio" name="problem_type" value="projector/smart board" onclick="compType(false);" /> Projector/Smart Board<br />
				<input type="radio" name="problem_type" value="lost information" onclick="compType(false);" /> Lost Information<br />
				<input type="radio" name="problem_type" value="email" onclick="compType(false);" /> Email<br />
				<input type="radio" name="problem_type" value="network connection/wireless" onclick="compType(false);" />Network Connection/Wireless<br />
				<input type="radio" name="problem_type" value="printers" onclick="compType(false);" /> Printers<br />
				<input type="radio" name="problem_type" value="software request" onclick="compType(false);" /> Software Request
			</p> 
			<div class="clear_both"></div>
			<div id="ifComputer">
				<p class="left"><label for="computer">Computer Type:</label></p>
				<p>
					<select name="computer">
						<option value="desktop">Desktop</option>
						<option value="laptop/netbook">Laptop/Netbook</option>
						<option value="tablet">Tablet</option>
					</select>
				</p>
				<div class="clear_both"></div>
			</div>
			<p class="left"><label for="description">Problem Description:</label></p><p><textarea name="description"></textarea></p>
			<div class="clear_both"></div>
			<p><input type="submit" value="Submit" id="helpSub" /></p>
			<div class="clear_both"></div>
		</fieldset>
	</form>

May I ask what browser you're viewing from? Right now I'm looking at it from a Mac in Firefox.

[alexjewell]

Turns out that a few lines of CSS were throwing off the script:

#ifRoom, #ifComputer{
display: none !important;}

After commenting these out, it worked. Thanks very much for your help!

[Nile]

No problem, I'm glad to help

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"