Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    selectedIndex causing 'Error on Page' in IE*

    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]
    Last edited by wbeardsl; 02-12-2013 at 11:41 PM. Reason: more infomration...

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    wbeardsl (02-13-2013)

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

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