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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Error when trying to show information from a dropdown menu

    Hello everyone,

    First of all, I'm sorry if this is an obvious problem because I'm relatively new to coding in general. What I'm trying to do is to show information regarding a selected drop down. For example, if I choose option A, a message will appear under the drop down menu explaining what is option A. I found a nice script that does exactly what I want. It works great in a blank page but when I try to add it to my code I get the following error: document.getElementById(...) is null or not an object for this line
    Code:
    document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    Here's my code:

    Code:
    <html>
    <body>
         <table border="0" cellspacing="0" cellpadding="0" height="92">
            <tr>
    	  <td width="100"></td>
              <td height="404" valign="top">
    	 
    	 </font>
    	 
                <form name="form1" method="post" >
    			<input type="hidden" name="withRefresh" value="0">
    
                  <h4><font face="Arial, Helvetica, sans-serif" color="#336600">Request:</font></h4>
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td><font face="Arial, Helvetica, sans-serif" size="2"><b>Priority:</b></font></td>
                      <td>
                        <select name="requestPty" size="1" onChange="displaydesc(document.form1.requestPty, text, 
    
    'PriorityInfo')">
                          		<option name="0" value="test" SELECTED  >Choose</option>
                          		<option name=1 value="test2">A=Production Down</option>
                          		<option name=2 value="test3">B=High</option>
                          		<option name=3 value="test4">C=Medium</option>
                          		<option name=4 value="test5">D=Low</option>
                          		<option name=5 value="test6">E=Improvement</option>
     			
    			<br>
    				<span id="PriorityInfo" align="left" style="font:italic">
    				</span>
    		  </td>
                    </tr>
    	      </table>
                  </form>
    	    </td>
            </tr>
          </table>
          
    <script type="text/javascript">	      
    
    var text=new Array()
    text[0]="Please select a priority."
    text[1]="Your production is down."
    text[2]="This is a high priority."
    text[3]="This is a medium priority."
    text[4]="This is a low priority."
    text[5]="This is an improvement."
    
    function displaydesc(which, descriptionarray, container){
    if (document.getElementById)
    document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    }
    
    displaydesc(document.form1.requestPty, text, 'PriorityInfo')
    
    </script>
    
    * : required information
    <br>
    <input type="button" name="button" value="Submit" onclick="checkEntry()">
    <INPUT TYPE="button" NAME="Cancel" VALUE="Cancel"  onClick='cancelReq()'>
    <hr>
    
    	<FORM NAME="changLang" ACTION = "changeLang.jsp" METHOD = "post" ENCODE="application/x-www-form-urlencoded">
    	<input type="hidden" name="language" value="fr">
    	<input type="hidden" name="targetPage" value="supportPbForm.jsp">
    	<input type="hidden" name="reloadInfo" value="1">
    	</form>
    	  </td>
            </tr>
          </table>
    </body>
    </html>
    Here's the code I found:

    Code:
    <!--Example drop down menu 1-->
    
    <form name="form1">
    <select name="requestPty" size="1" style="background-color:#FFFFD7" 
    
    onChange="displaydesc(document.form1.requestPty, thetext1, 'PriorityInfo')">
    <option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
    <option value="http://freewarejava.com">Freewarejava.com</option>
    <option value="http://wired.com" target="newwin">Wired News</option>
    <option value="http://www.news.com">News.com</option>
    <option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
    <option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
    </select>
    <br>
    <span id="PriorityInfo" align="left" style="font:italic 13px Arial">
    </span>
    </form>
    
    <!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
    <!--To be safe, just add below script at the end of your page-->
    
    <script type="text/javascript">
    
    
    //CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
    var thetext1=new Array()
    thetext1[0]="Please select a priority."
    thetext1[1]="Your production is down."
    thetext1[2]="This is a high priority."
    thetext1[3]="This is a medium priority."
    thetext1[4]="This is a low priority."
    thetext1[5]="This is an improvement."
    
    // Now, see 2) below for final customization step
    
    function displaydesc(which, descriptionarray, container){
    if (document.getElementById)
    document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    }
    
    
    //2) Call function displaydesc() for each drop down menu you have on the page
    //   This function displays the initial description for the selected menu item
    //   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag)
    
    displaydesc(document.form1.requestPty, thetext1, 'PriorityInfo')
    
    </script>
    Nothing shows at all with my code Any ideas?

  • #2
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? please Any clarification I should add?

  • #3
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by ChIcO View Post
    Anyone? please Any clarification I should add?
    You have a missing </select> tag which prevents the containing span from being rendered/detected. Also your stylesheet should read font-style:italic

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot...that was indeed a ridiculous error


  •  

    Posting Permissions

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