Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Checking the value of a <select> on page load. 2

Status
Not open for further replies.
deadpool42

deadpool42

Programmer
May 24, 2004
40
This is the code I have right now to check the value of a list:
Code: 
var selected = document.getElementById('id').selectedIndex;
var option = document.getElementById('id').options[selected].value;

The problem is that this doesn't work until someone actually clicks the element. I want to check its value in the body's onLoad event. Any tips?
 
Sort by date Sort by votes
I forgot to add that Internet Explorer does get the value, it's Mozilla and Netscape that don't.
 
Upvote 0 Downvote
try a different name, using the name 'id' could be causing the issue.
 
Upvote 0 Downvote
>that Internet Explorer does get the value, it's Mozilla and Netscape that don't.
Just verified that FF & NN get the value no problem.
 
Upvote 0 Downvote
Any tips?
Click to expand...

yes - selected will be -1 if there is no value selected, and trying to get the -1th option is invalid. You need to test to see if selected is -1 or not before you assume you can get that value for the option.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Hmmm, upon further experimentation, it does get the right value, but my code still only works in IE. Here's the full code that's bothering me:
Code: 
function toggleForm() {
	selected = document.getElementById('sel_form').selectedIndex;
	selected = document.getElementById('sel_form').options[selected].value;
	textrow = document.body.getElementsByTagName('table')[1].getElementsByTagName('tr')[7];
	textarearow = document.body.getElementsByTagName('table')[1].getElementsByTagName('tr')[8];
	if (selected == 'new') {
		textrow.style.display = 'block';
		textarearow.style.display = 'block';
	}
	else {
		textrow.style.display = 'none';
		textarearow.style.display = 'none';
	}
}

document.getElementById('sel_form').onchange = toggleForm;
document.body.onload = function () {
	toggleForm();
}

Basically what this does is to hide two table rows if the anything other than "new" is selected. It works when the "sel_form" element is changed, but only IE hides the rows properly when the page loads.
 
Upvote 0 Downvote
If you insert this:

Code: 
alert(selected);

after each of these two lines:

Code: 
selected = document.getElementById('sel_form').selectedIndex;
selected = document.getElementById('sel_form').options[selected].value;

to make this:

Code: 
selected = document.getElementById('sel_form').selectedIndex;
alert(selected);
selected = document.getElementById('sel_form').options[selected].value;
alert(selected);

Can you tell us what the two values you are seeing for "selected" are?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Well I've found the problem. It seems that in Netscape and Mozilla, it's impossible to have an onload event without having the onload attribute in the <body> tag itself. I've tried putting this code in several places throughout the file and tried both anonymous and named functions, but it never even gets called.

Code: 
document.body.onload = function () {
    toggleForm();
}
 
Upvote 0 Downvote
Don't use that syntax - I'm not surprised it doesn't work in Gecko based browsers - it's an ugly IE-only shortcut hack.

Try one of these:

Code: 
onload = function...
window.onload = function...

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
>it's an ugly IE-only shortcut hack
I find the approach, though not as usual as window.onload, still work in ff/nn
[tt]
document.body.onload = function () {
toggleForm();
}
[/tt]
The construction has its own characteristic and use.

I do not see why the complaint by op. If toggleForm() is erroneous, anything can happen or not happen. What version of mozilla based browsers are we talking about?
 
Upvote 0 Downvote
Thanks, just using onload instead of document.body.onload actually works. I've never seen that syntax before and it seems a little weird that that's the "correct" way since the onload attribute usually goes in the <body> tag.

tsuji, here's the test html I was using. It fails to generate an alert() or even produce an error in the Javascript console on Netscape 7.2 and Firefox 1.0.4.

Code: 
<html>
<head></head>
<script type="text/javascript" language="Javascript">
<!--
function getSelection() {
	var selected = document.getElementById('list').selectedIndex;
	alert(document.getElementById('list').options[selected].value);
}
-->
</script>
<body>
<select name="list" id="list">
<option value="wrong">not selected</option>
<option value="correct" selected="selected">selected</option>
</select>
<script type="text/javascript" language="Javascript">
<!--
document.body.onload = getSelection;
-->
</script>
</body>
</html>
 
Upvote 0 Downvote
deadpool42,

The placing of script(s) is slightly awkward to my habit, but it still is possible.

The only call you need to change is this.
[tt]
var selected = document.getElementById('list').[red]options.[/red]selectedIndex;
[/tt]
- tsuji
 
Upvote 0 Downvote
I take back the last post. I was testing different thing. Sorry. I will take a closer look.
- tsuji
 
Upvote 0 Downvote
it seems a little weird that that's the "correct" way since the onload attribute usually goes in the <body> tag.
Click to expand...

It's not the only correct way - there are multiple ways to run code onload. There are also many elements that have an onload event to harness - not just the body (images, windows, frames, etc).

Also to clarify:

MSDN said:
The onload attribute of the body object sets an onload event handler for the window.
Click to expand...

In fact, it is well documented that some browsers will ignore the onload event on the body, but pick it up on the window (IE on Windows CE, for example)

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
After testing, I am convinced the truth of doucment.body.onload construction is ie proprietory as BRPS rightly pointed out. My mistake of thinking it is cross-browser. Bravo BRPS for this and my hats off to BRPS.

- tsuji
 
Upvote 0 Downvote
Well if they don't want to support it (although it makes sense to me for the body to have an onload event), they have it produce some kind of error message. Then I would have solved this whole mess two days ago and never had to post this thread. :/
 
Upvote 0 Downvote
deadpool42,
I usually use window.onload for this purpose or onload inside the body tag, which are happily cross- and rarely touch upon document.body construction. I'm sorry for confusing you further. Hope this clear up now.
- tsuji
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
837
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
944
xwb
xwb
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top