selectedIndex causing 'Error on Page' in IE*

wbeardsl · 02-12-2013, 11:37 PM

I am hoping that there is some alternative to the code I've posted below so that it will work in IE8. At the moment it is not performing the function at all although it works in Dreamweaver. This code is used to validate and provide feedback once options are selected from 4 drop down boxes and a submit button is pressed.

[code]function valid(option1,option2,option3,option4) {
if(option1.selectedIndex == 0) {
showDiv3()
}

else if(option1.selectedIndex == 4&&option2.selectedIndex == 3&&option3.selectedIndex == 2&&option4.selectedIndex == 1) {
showDiv1()
}
else{ showDiv2()
}}[code]

Old Pedant · 02-13-2013, 12:09 AM

Never ever trust anything DreamWeaver tells you. More correctly named "Nightmare Stalker," that product produces the worst JavaScript code of most anything available and it's detection of JS errors is almost as bad.

Having said all that...

How can we tell where the problem is when you show us only that function?

There is nothing wrong in the function code, per se, but there could well be problems in the way it is called.

You need to show us a lot more code. Or, better, give us a live URL to look at.

By the by, you need to end your code section with [/code], not just [code], if you want us to see your code in proper indentation, etc.

wbeardsl · 02-13-2013, 01:45 AM

Sorry, I'm new to this so I don't know how much code you need. I can't give you a URL as it is not an acccesible site.

This is the functions being called:

Code:

function showDiv1() {    
	document.getElementById('correctDiv').style.display = "block";	
} 
function hideDiv1(){
	document.getElementById('correctDiv').style.display = "none";
}

function showDiv2() {    
	document.getElementById('incorrectDiv').style.display = "block";	
} 
function hideDiv2(){
	document.getElementById('incorrectDiv').style.display = "none";
}

function showDiv3() {    
	document.getElementById('noactionDiv').style.display = "block";	
} 
function hideDiv3(){
	document.getElementById('noactionDiv').style.display = "none";
}

This is the code that controls the drop down menus:

Code:

<form  onsubmit="return valid(this.option1,this.option2,this.option3,this.option4)" target="_self" name="a01" id="a01" method="post" action="/toolbox/wkbAssessAct.asp" class="Form1">
      <p>Using Council's incident classification system, classify the following incidents by matching up the Category with the incident description by matching the Category to the incident description.</p>
      <P>At a road repair work site a traffic controller stepped into a depression in the roadway twisting her left ankle. The worker reported the incident to the site supervisor and</P>
      <table width="70%" border=0 cellpadding=2 cellspacing=1>
        <tr>
          <td width="51%" style="font-size:14px" >1. Returned to work although suffering discomfort for a couple of days</td>
          <td width="49%"><select name='option1' >
              <option value="0" selected>[please select]</option>
              <option value="1">Cat 1</option>
              <option value="2">Cat 2</option>
              <option value="3">Cat 3</option>
              <option value="4">Cat 4</option>
          </select></td>
        <tr>
          <td style="font-size:14px">2. Following treatment by the onsite first aider returned to work</td>
          <td><select name='option2' >
              <option value="0" selected>[please select]</option>
              <option value="1">Cat 1</option>
              <option value="2">Cat 2</option>
              <option value="3">Cat 3</option>
              <option value="4">Cat 4</option>
            </select></td>
        <tr>
          <td style="font-size:14px">3. After being treated by her doctor took two days off work</td>
          <td><select name='option3' >
              <option value="0" selected>[please select]</option>
              <option value="1">Cat 1</option>
              <option value="2">Cat 2</option>
              <option value="3">Cat 3</option>
              <option value="4">Cat 4</option>
            </select></td>
        <tr>
          <td style="font-size:14px">4. After being treated by her doctor took two weeks off work</td>
          <td><select name='option4' >
              <option value="0" selected>[please select]</option>
              <option value="1">Cat 1</option>
              <option value="2">Cat 2</option>
              <option value="3">Cat 3</option>
              <option value="4">Cat 4</option>
            </select></td>
      </table>
      <hr noshade="noshade" size="1" />
      <div>
        <INPUT class=btn type=submit onClick="valid(this.option1,this.option2,this.option3,this.option4);P7_Snap('option1','correctDiv',20,5)" value=Submit name=submit>
       
<INPUT class=btn type=reset value=Reset onClick="hideDiv1(); hideDiv2(); hideDiv3()"name=reset>
      </div>

If this is not enough of the code let me know and I'll send the whole page.

Old Pedant · 02-13-2013, 02:12 AM

Code:

<INPUT class=btn type=submit 
     onClick="valid(this.option1,this.option2,this.option3,this.option4);
    P7_Snap('option1','correctDiv',20,5)" value=Submit name=submit>

This is wrong... The this here refers to the submit button.

You would need to use

Code:

<INPUT class=btn type=submit 
     onClick="valid(this.form.option1,this.form.option2,this.form.option3,this.form.option4);
    P7_Snap('option1','correctDiv',20,5)" value=Submit name=submit>

But it's kind of pointless, as when the user clicks on this submit button the form will be submitted and then you will end up calling the valid( ) function *again* in the <form onsubmit="valid(...)">. So why bother?

But then making the call from the <form onsubmit> is kind of pointless, too.

Code:

<form  onsubmit="return valid(this.option1,this.option2,this.option3,this.option4)" 
     target="_self" name="a01" id="a01" method="post"
     action="/toolbox/wkbAssessAct.asp" class="Form1">

Because your valid( ) function never returns any value, the return in that onsubmit is useless, and the form will *ALWAYS* be submitted. Meaning that any change is the display of the various <div>s will only last at most a second while the new page (wkbAssessAct.asp) is fetched from the server.

If you want your show and hide div stuff to actually *work* and for the user to stay on the same page after it works, you need to return false from the valid( ) function else the page *will* submit.

I would also like to point out that if this is supposed to be a quiz then it is kind of useless, as the user can see the answer by simply doing a VIEW-->>SOURCE on the web page.

wbeardsl · 02-13-2013, 06:16 AM

Thanks for your feedback. I accept that there may well be extra bits and pieces in here that are redundant but this is reflective of the fact that I am not a javascript expert and I tend to copy code from different places in order to get something to work. This code is actually part of a page that belongs to a online training course that is housed in an LMS. I have removed the code you referred to as superfulous and it is all working well.

And yes, anyone who knew about webpage design would be able to view source and (if they can read the code) work out the answer. Most of our staff would not know to do this so it is not really an issue. Not sure how I could hide this anyway.

Thanks again for your help. It has been invaluable!