Results 1 to 7 of 7

Thread: JavaScript Form Events: OnClick Not Working

  1. #1
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default JavaScript Form Events: OnClick Not Working

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

    Code:
    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';
    }
    HTML Code:
    <p class="left"><input type="checkbox" name="chkRoom" onclick="panicRoom();" /> Specify Room:</p>
    <div id="ifRoom">
         <p><input type="text" name="room" /></p>
    </div>
    HTML Code:
    <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>
    HTML Code:
    <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!
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Here, some things were changed because I dont have all the code:
    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>
    Jeremy | jfein.net

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Any updates?
    Jeremy | jfein.net

  4. #4
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

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

    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);
    	}
    }
    HTML Code:
    	<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>
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    The following works fine for me.
    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('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.
    Jeremy | jfein.net

  6. #6
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

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

    Code:
    #ifRoom, #ifComputer{
    display: none !important;}
    After commenting these out, it worked. Thanks very much for your help!
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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"
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •