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

    javascript select modification

    PROBLEM: external script can't modify selectbox on the fly

    HTML source:
    Code:
    ...
    <form name="formA" ............>
     <select name="selectA" id="a"
       onclick='document.formA.selectA.options.length=0;
       document.formA.selectA.options[0]=new Option("None", "", false, false);
       javascript:getOptions();'>
      <option value="">None</option>
     </select>
    ...
    <script language='javascript'>
     function getOptions() {
      parent.secret.location.href='externalGetoptions.js';
     }   
    </script>
    externalGetOptions.js
    Code:
    <script language='javascript'>
     document.formA.selectA.options[document.formA.selectA.options.length]=new Option("Example1", "Example1 value", false, false);
    </script>
    The script in externalGetOptions is basically ok (as I call it directly in the html source (when I place the code in the script section in the HTML-source) everything works fine). Point is that this piece of script in the HTML source is built on the server side and need to be in an external js-file. So it needs to be an onclick event.

    Message I get:
    document.formA is undefined.

    I assume he can't find the select element
    Last edited by mmniet; 07-17-2009 at 12:48 PM. Reason: resolved

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    You should place declaration of the external script after the form in the document (but not before or in the head section).
    Try to assign an identifier to the form and let the script to get it with the getElementById method.
    Code:
    ...
    <form id="formA" name="formA" ............>
     <select name="selectA" id="a"
       onclick='document.formA.selectA.options.length=0;
       document.formA.selectA.options[0]=new Option("None", "", false, false);
       javascript:getOptions();'>
      <option value="">None</option>
     </select>
    ...
    <script type="text/javascript" src="externalGetOptions.js"></script>
    In externalGetOptions.js:
    Code:
    document.getElementById("formA").selectA.options[document.getElementById("formA").selectA.options.length]=new Option("Example1", "Example1 value", false, false);

    Update: if the code above is called at onclick only there is no difference where to place the script declaration. It should be realized as a function in that case.
    Last edited by Amphiluke; 07-17-2009 at 11:01 AM.
    I am still learning English

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    document.getElementById('formA') is null

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Please post the complete html source code. It looks like you call the script before the select is created.
    I am still learning English

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    the script part is at the end of the HTML file.

    HTML source
    Code:
    <html>
    <head>
    // Not an important file for this function
    	<script language="JavaScript" src="/expub/rjs/common.js"></script> 
    </head>
    <body >
    <div id="pagebody">
    <form method="post" id="frsel" name="frsel" action="/main/searchresult.html">
     <table border=0>
      <tr>
       <td vallign=top align=left>
        <select style='width:190;height:100' size=8 id='kodlok' name='kodlok'
                   onclick='document.frsel.kodlok.options.length=0;
                   document.frsel.kodlok.options[0]=new Option("<%TEXT:selectall%>", "", false, false);
                   javascript:getLoks();'>
         <option value=''>Geen</option>
        </select>
       </td>
      </tr>
      <td>
       <input type="submit" value="Zoeken >" class="buttonY100" 
                 onmouseover="this.className='buttonN100';this.parentElement.parentElement.children[0].className='formkopred'" 
    	     onmouseout="this.className='buttonY100';this.parentElement.parentElement.children[0].className='formkop'">
       </td>
      </tr>
     </table>
    </form>
    </div>
    
    <script language='javascript'>
     function getLoks() {
      var best =   document.frsel.kodbest.options[document.frsel.kodbest.selectedIndex].value;
      parent.secret.location.href='/main/searchhidden.html;
      }    
    </script>
    </body>
    </html>
    searchhidden.html
    Code:
    <html>
    <head>
    	<meta http-equiv="Expires"       content="0">
    	<meta http-equiv="Pragma"        content="no-cache">
    	<meta http-equiv="Cache-Control" content="no-cache">
    </head>
    <script language='javascript'>
    	document.getElementById('frsel').kodlok.options[document.getElementById('frsel').kodlok.options.length]=new Option("screenvalue1", "waarde1", false, false);
    </script>
    </html>
    This is it. Hopefully you can help me
    Last edited by mmniet; 07-17-2009 at 11:46 AM. Reason: posting source

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    I do not get any errors...
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <title>Template</title>
    </head>
    <body>
       <form action="#" id="formA" name="formA">
          <select name="selectA" id="a" onclick='getOptions();'>
             <option value="">None</option>
          </select>
       </form>
       <script type="text/javascript" src="externalGetOptions.js"></script>
    </body>
    </html>
    JavaScript (externalGetOptions.js):
    Code:
    function getOptions() {
       document.getElementById("formA").selectA.options[document.getElementById("formA").selectA.options.length]=new Option("Example1", "Example1 value", false, false);
    }
    P.S. Probably, I do not understand what you are trying to do.
    I am still learning English

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    editted my post with full source, here it isn't working.

    the purpose is to fill the option of the select box when clicking on the select.

    in the real source there are 2 selectboxes. Clicking on box 1 fill box 2 with the correct options.

    sorry, i see i was wrong in my first post. i'm not calling a js file, but a html file including the script.

  • #8
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Quote Originally Posted by mmniet
    Code:
    parent.secret.location.href='/main/searchhidden.html;
    Do you use frames? As far as I understand it, the searchhidden.html is loaded to the 'secret' frame as one clicks the select. If so, try to modify the searchhidden.html as follows:
    Code:
    <html>
    <head>
    	<meta http-equiv="Expires"       content="0">
    	<meta http-equiv="Pragma"        content="no-cache">
    	<meta http-equiv="Cache-Control" content="no-cache">
    </head>
    <script language='javascript'>
    	var wnd = window.top.frames["frame_with_select"];
    	wnd.document.getElementById('frsel').kodlok.options[wnd.document.getElementById('frsel').kodlok.options.length]=new Option("screenvalue1", "waarde1", false, false);
    </script>
    </html>
    where frame_with_select is the name of the frame where the form is located.

    But why not simply use an external script as I demonstrated in post #6?
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    mmniet (07-17-2009)

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    YEAH!

    Thanx! this worked, sorry i forgot to tell it was a framed window. It was a webpage which isnt originally build by myself, so i forgot.

    This works.

    solution at post #6:
    propably. The question is, when is the script file loaded. When the page is loaded, or when the onclick event fires. If first then it isnt possible. Because the options are generated (options for box2) using the selected option in box 1.

  • #10
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    I just suggest to modify the getLoks() function slightly.
    Code:
    <script language='javascript'>
     function getLoks() {
      var best =   document.frsel.kodbest.options[document.frsel.kodbest.selectedIndex].value;
      /* parent.secret.location.href='/main/searchhidden.html; */
       document.getElementById('kodlok').options[document.getElementById('kodlok').options.length]=new Option("screenvalue1", "waarde1", false, false);
      }    
    </script>
    Maybe, I'm mistaken...
    I am still learning English


  •  

    Posting Permissions

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