PDA

View Full Version : JavaScript Form Events: OnClick Not Working



alexjewell
12-02-2010, 08:21 PM
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:


If a checkbox to specify a room is checked, an input for that room appears
If one school campus is selected (which it is by default), a select box appears to choose which school
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
12-03-2010, 12:08 AM
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
12-05-2010, 01:18 AM
Any updates?

alexjewell
12-06-2010, 03:05 PM
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
12-06-2010, 10:50 PM
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
12-07-2010, 01:50 PM
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
12-08-2010, 02:03 AM
No problem, I'm glad to help :D

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"