...

View Full Version : javascript select modification



mmniet
07-17-2009, 09:16 AM
PROBLEM: external script can't modify selectbox on the fly

HTML source:


...
<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


<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

Amphiluke
07-17-2009, 09:53 AM
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.

...
<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:

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.

mmniet
07-17-2009, 10:16 AM
document.getElementById('formA') is null :(

Amphiluke
07-17-2009, 10:26 AM
Please post the complete html source code. It looks like you call the script before the select is created.

mmniet
07-17-2009, 10:29 AM
the script part is at the end of the HTML file.

HTML source


<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


<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

Amphiluke
07-17-2009, 10:43 AM
I do not get any errors...
HTML:

<!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):

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.

mmniet
07-17-2009, 10:49 AM
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.

Amphiluke
07-17-2009, 11:11 AM
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:

<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?

mmniet
07-17-2009, 11:26 AM
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.

Amphiluke
07-17-2009, 11:37 AM
I just suggest to modify the getLoks() function slightly.

<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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum