Firefox does not reflect selected option via innerHTML

M

McKirahan

Firefox does not reflect selected option via innerHTML

How do I get Firefox to reflect selected option values?

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function clicks() {
document.getElementById("t1").value =
document.getElementById("s1").innerHTML;
}
</script>
</head>
<body>
<span id="s1">
<form>
<select>
<option value=""></option>
<option value="1">1</option>
</select>
<input type="button" value="Click" onclick="clicks()">
<textarea name="t1" id="t1" cols="80" rows="10"></textarea>
</form>
</span>
</body>
</html>

Selecting the first option (i.e. "1") then hitting "Click" gives:

(under IE)

<FORM>
<SELECT>
<OPTION value=""></OPTION>
<OPTION value=1 selected>1</OPTION>
</SELECT>
<INPUT onclick=clicks() type=button value=Click>
<TEXTAREA id=t1 name=t1 rows=10 cols=80></TEXTAREA>
</FORM>

(under FF)

<form>
<select>
<option value=""></option>
<option value="1">1</option>
</select>
<input value="Click" onclick="clicks()" type="button">
<textarea name="t1" id="t1" cols="80" rows="10"></textarea>
</form>

As you can see, IE shows that "1" is "selected" and FF does not.

Is there a fix? Thanks in advance.

P.S. "Big Al" posted a solution for input boxes at
http://forums.whirlpool.net.au/forum-replies-archive.cfm/385091.html
which "registers the changes with the DOM" via "setAttribute":
<input type="text" value="initial"
onblur="this.setAttribute('value',­this.value);" />
So I guess I'm looking for something comparable for the <select> tag.
 
W

web.dev

McKirahan said:
Firefox does not reflect selected option via innerHTML

How do I get Firefox to reflect selected option values?

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function clicks() {
document.getElementById("t1").value =
document.getElementById("s1").innerHTML;
}

Why are you using innerHTML? Do the following instead:

function clicks()
{
selObj = document.getElementById("s1");
taObj = document.getElementById("t1");

taObj.value = selObj[selObj.selectedIndex].value;
}

Works in both FF and IE.
 
R

Randy Webb

web.dev said the following on 10/11/2005 1:01 PM:
McKirahan said:
Firefox does not reflect selected option via innerHTML

How do I get Firefox to reflect selected option values?

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function clicks() {
document.getElementById("t1").value =
document.getElementById("s1").innerHTML;
}


Why are you using innerHTML? Do the following instead:

function clicks()
{
selObj = document.getElementById("s1");
taObj = document.getElementById("t1");

taObj.value = selObj[selObj.selectedIndex].value;
}

Works in both FF and IE.

And why are you using gEBI to access a form element? Use the forms
collection:

selObj = document.forms['formNAMEnotID'].elements['s1'].value
taObj = document.forms['formNAMEnotID'].elements['t1'].value

taObj.value = selObj[selObj.selectedIndex].value

Now, it works in any browser that reasonably supports any type of
scripting at all of forms. That even includes the outdated (and
hopefully dead) NN4 which is the only browser that required the
convention of selObj[selObj.selectedIndex].value to access the value of
a select item.
 
M

McKirahan

Randy Webb said:
web.dev said the following on 10/11/2005 1:01 PM:
[snip]

And why are you using gEBI to access a form element? Use the forms
collection:

selObj = document.forms['formNAMEnotID'].elements['s1'].value
taObj = document.forms['formNAMEnotID'].elements['t1'].value

taObj.value = selObj[selObj.selectedIndex].value

Now, it works in any browser that reasonably supports any type of
scripting at all of forms. That even includes the outdated (and
hopefully dead) NN4 which is the only browser that required the
convention of selObj[selObj.selectedIndex].value to access the value of
a select item.

Because <span> is not in the forms collection.

Also, because using the forms collection may alter the content. Try this:

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function click1() {
document.getElementById("t1").value =
document.getElementById("s").innerHTML;
}
function click2() {
document.forms[0].t2.value = document.getElementById("s").innerHTML;
}
</script>
</head>
<body>
<span id="s">
<form>
<select>
<option value=""></option>
<option value="1">1</option>
</select>
<hr><input type="button" value="Click 1" onclick="click1()">
<br><textarea name="t1" id="t1" cols="80" rows="10"></textarea>
<hr><input type="button" value="Click 2" onclick="click2()">
<br><textarea name="t2" id="t2" cols="80" rows="18"></textarea>
</form>
</span>
</body>
</html>
 
M

Michael Winter

Firefox does not reflect selected option via innerHTML

How do I get Firefox to reflect selected option values?

In my opinion, it shouldn't. The selected attribute corresponds to the
defaultSelected property, just like the value and checked attributes
correspond to the defaultValue and defaultChecked properties of INPUT
elements, respectively. None of these attributes should reflect the
current status or values.

[snip]
<span id="s1">
<form>

You do realise that a browser is well within its rights to error-correct
that to:

<span id="s1"></span>
<form>

don't you? A SPAN element is in-line, whereas a FORM element is
block-level. The former cannot contain the latter.

[snip]

Mike
 
R

Randy Webb

McKirahan said the following on 10/11/2005 1:46 PM:
web.dev said the following on 10/11/2005 1:01 PM:

[snip]


And why are you using gEBI to access a form element? Use the forms
collection:

selObj = document.forms['formNAMEnotID'].elements['s1'].value
taObj = document.forms['formNAMEnotID'].elements['t1'].value

taObj.value = selObj[selObj.selectedIndex].value

Now, it works in any browser that reasonably supports any type of
scripting at all of forms. That even includes the outdated (and
hopefully dead) NN4 which is the only browser that required the
convention of selObj[selObj.selectedIndex].value to access the value of
a select item.


Because <span> is not in the forms collection.

Forms can't be children of span's either.
Also, because using the forms collection may alter the content. Try this:

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function click1() {
document.getElementById("t1").value =
document.getElementById("s").innerHTML;
}
function click2() {
document.forms[0].t2.value = document.getElementById("s").innerHTML;
}
</script>
</head>
<body>
<span id="s">
<form>
<select>
<option value=""></option>
<option value="1">1</option>
</select>
<hr><input type="button" value="Click 1" onclick="click1()">
<br><textarea name="t1" id="t1" cols="80" rows="10"></textarea>
<hr><input type="button" value="Click 2" onclick="click2()">
<br><textarea name="t2" id="t2" cols="80" rows="18"></textarea>
</form>
</span>
</body>
</html>

That is not the forms collection changing it, it is the browsers
implementation of how to get the innerHTML property. And as there is no
public standard to innerHTML, neither is right and neither is wrong.

As for what you are trying to accomplish, the way that you are trying to
accomplish it is *the* dumbest way to try to accomplish it.

You want to store the form the way it was being displayed at the time a
submit button was clicked? You get the values that are passed during
form submission and you re-generate the form - either before or after
saving it to the database.

If it is something else that you are trying to do (other than what you
have posted as being your intent), then please share that information.

But I promise, the answer does *not* require the use of .innerHMTL and
10-1 will get you a non-client-side scripting solution.
 
R

RobG

Randy Webb wrote:
[...]
Now, it works in any browser that reasonably supports any type of
scripting at all of forms. That even includes the outdated (and
hopefully dead) NN4 which is the only browser that required the
convention of selObj[selObj.selectedIndex].value to access the value of
a select item.

IE also requires that convention to get the value of a selected option
if it doesn't have a value attribute (i.e. to get the text):

<select onchange="
alert('this.value: ' + this.value + '\n'
+ 'this.text: ' + this.text + '\n'
+ 'this[this.selectedIndex].text: '
+ this[this.selectedIndex].text )
">
<option>red
<option>green
<option>blue
<option>black
</select>



Of course it can be avoided by always using value attributes. :p
 
M

McKirahan

McKirahan said:
Firefox does not reflect selected option via innerHTML

How do I get Firefox to reflect selected option values?

[snip]

I got a solution from "Big Al".

<html>
<head>
<title>FFinner.htm</title>
<script type="text/javascript">
function blurs(that) {
if (that.type == "select-one") {
for (var i=0; i<that.options.length; i++) {
if (i == that.selectedIndex) {

that.options[that.selectedIndex].setAttribute("selected","selected");
}
}
} else if (that.type == "text") {
that.setAttribute("value",that.value);
}
}
function clicks() {
document.getElementById('t').value =
document.getElementById("d").innerHTML;
}
</script>
</head>
<body>
<div id="d">
<form>
<select onblur="blurs(this)">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" value="" onblur="blurs(this)">
<input type="text" value="">
<input type="button" value="Click" onclick="clicks()">
<br><textarea name="t" id="t" cols="80" rows="10"></textarea>
</form>
</div>
</body>
</html>


Selecting "1" and "2" and entering "3" and "4" gives
the following in the <textarea>; (line breaks added):

1). Results under IE:

<FORM>
<SELECT onblur=blurs(this)>
<OPTION value=""></OPTION>
<OPTION value=1 selected>1</OPTION>
<OPTION value=2>2</OPTION>
</SELECT>
<SELECT>
<OPTION value=""></OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=2 selected>2</OPTION>
</SELECT> <INPUT onblur=blurs(this) value=3>
<INPUT value=4>
<INPUT onclick=clicks() type=button value=Click>
<BR>
<TEXTAREA id=t name=t rows=10 cols=80>
</TEXTAREA>
</FORM>

3. Results under FF:

<form>
<select onblur="blurs(this)">
<option value=""></option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input value="3" onblur="blurs(this)" type="text">
<input value="" type="text">
<input value="Click" onclick="clicks()" type="button">
<br><textarea name="t" id="t" cols="80" rows="10">
</textarea>
</form>

As can be seen above, under Firefox:
"2" is not selected and "4" is not the value
because "onblur=" was not executed.

The "function blurs()" is used to
"register the selected option with the DOM".

Thanks for everyone's input.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top