Javascript wierdness

L

Lorenzo Thurman

When using this code, I can get the value of the select. But this only
works if the select is within a form. The commented code, which I think
_should_ work, does not work whether it's in a form or not. This happens
in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
skills are not all that great, but am I missing something?
Thanks

function setStatusText(){

//var index = document.getElementById('bridgeSelect').value;
var str= document.forms['test'].options.value;
document.getElementById('bridgeStatus').innerHTML = str;
}


####################
<body>
<form name='test'>
<div id="bridgeSelect"
onchange="toggleBridgeStatus(false);setStatusText()"><select name="options">
<option value="status" selected="yes">Status
<option value="option1">Option1
<option value="option2">Option2
</select>
</div>
</form>
</body>
 
L

Lee

Lorenzo Thurman said:
When using this code, I can get the value of the select. But this only
works if the select is within a form. The commented code, which I think
_should_ work, does not work whether it's in a form or not. This happens
in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
skills are not all that great, but am I missing something?
Thanks

function setStatusText(){

//var index = document.getElementById('bridgeSelect').value;
var str= document.forms['test'].options.value;
document.getElementById('bridgeStatus').innerHTML = str;
}


####################
<body>
<form name='test'>
<div id="bridgeSelect"
Click to expand...

bridgeSelect is a <DIV> element, and so doesn't have a "value".

How to get the value of a form control:
http://www.jibbering.com/faq/#FAQ4_13


--
 
R

RobG

Lorenzo said:
When using this code, I can get the value of the select. But this only
works if the select is within a form. The commented code, which I think
_should_ work, does not work whether it's in a form or not. This happens
in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
skills are not all that great, but am I missing something?
Click to expand...

Yes, an understanding of HTML DOM element properties.

function setStatusText(){

//var index = document.getElementById('bridgeSelect').value;
Click to expand...

The reason this line doesn't "work" is because
document.getElementById('bridgeSelect') returns a reference to a div
element, which is a standard HTML DOM element. If you look at the
properties of a normal HTML DOM element, you will see that it doesn't
have a "value" attribute/property:

var str= document.forms['test'].options.value;
Click to expand...

In this line, you are using the document's forms collection to get a
reference to the form named 'test', then to the select element named
'options' whose value attribute (in W3C compliant browsers) is the value
of the selected option.

The most widely supported method (though I've forgotten the precise
reason why it is used) is:

var sel = document.forms['test'].elements['options'];
var str = sel[sel.selectedIndex].value;


The first line could be abbreviated to:

var sel = document.test.options;


<URL:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection >
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980 >


I would not recommend calling a select element 'options', it is
confusing to me as select elements have an options property that is a
collection of all the options.
 
R

Randy Webb

RobG said the following on 8/19/2006 10:24 PM:

The most widely supported method (though I've forgotten the precise
reason why it is used) is:

var sel = document.forms['test'].elements['options'];
var str = sel[sel.selectedIndex].value;
Click to expand...

It is a throw back to the Netscape 4 days when NN4.xx browsers wouldn't
expose the value of a select element without going through the
collection. It is covered, lightly, in the FAQ section 4.13
 
L

Lorenzo Thurman

Lee said:
Lorenzo Thurman said:
When using this code, I can get the value of the select. But this only
works if the select is within a form. The commented code, which I think
_should_ work, does not work whether it's in a form or not. This happens
in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
skills are not all that great, but am I missing something?
Thanks

function setStatusText(){

//var index = document.getElementById('bridgeSelect').value;
var str= document.forms['test'].options.value;
document.getElementById('bridgeStatus').innerHTML = str;
}


####################
<body>
<form name='test'>
<div id="bridgeSelect"
Click to expand...

bridgeSelect is a <DIV> element, and so doesn't have a "value".

How to get the value of a form control:
http://www.jibbering.com/faq/#FAQ4_13
Click to expand...
Thanks, I guess I need to work on my DOM also.
 
L

Lorenzo Thurman

RobG said:
Lorenzo said:
When using this code, I can get the value of the select. But this only
works if the select is within a form. The commented code, which I
think _should_ work, does not work whether it's in a form or not. This
happens in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My
javascript skills are not all that great, but am I missing something?
Click to expand...

Yes, an understanding of HTML DOM element properties.

function setStatusText(){
//var index = document.getElementById('bridgeSelect').value;
Click to expand...

The reason this line doesn't "work" is because
document.getElementById('bridgeSelect') returns a reference to a div
element, which is a standard HTML DOM element. If you look at the
properties of a normal HTML DOM element, you will see that it doesn't
have a "value" attribute/property:

var str= document.forms['test'].options.value;
Click to expand...

In this line, you are using the document's forms collection to get a
reference to the form named 'test', then to the select element named
'options' whose value attribute (in W3C compliant browsers) is the value
of the selected option.

The most widely supported method (though I've forgotten the precise
reason why it is used) is:

var sel = document.forms['test'].elements['options'];
var str = sel[sel.selectedIndex].value;


The first line could be abbreviated to:

var sel = document.test.options;


<URL:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection >
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980 >


I would not recommend calling a select element 'options', it is
confusing to me as select elements have an options property that is a
collection of all the options.

document.getElementById('bridgeStatus').innerHTML = str;
}


####################
<body>
<form name='test'>
<div id="bridgeSelect"
onchange="toggleBridgeStatus(false);setStatusText()"><select
name="options">
<option value="status" selected="yes">Status
<option value="option1">Option1
<option value="option2">Option2
</select>
</div>
</form>
</body>
Click to expand...
Click to expand...
Thanks, I guess I need to work on my DOM also.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Multi select options in a menu 1
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Survey details won't go through using php, ajax, Mysql 0
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
Add Image and label dynamically inside the dropdown 2
Calculating totals in webpage using js. 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 446

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top