By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,669 Members | 2,546 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,669 IT Pros & Developers. It's quick & easy.

Firefox does not reflect selected option via innerHTML

P: n/a
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...fm/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.

Oct 11 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a

McKirahan wrote:
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.
</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...fm/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.


Oct 11 '05 #2

P: n/a
"web.dev" <we********@gmail.com> wrote in message
news:11*********************@g49g2000cwa.googlegro ups.com...
McKirahan wrote:
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:


Because I'm inserting the contents of the span into a database.

[snip]
Oct 11 '05 #3

P: n/a
web.dev said the following on 10/11/2005 1:01 PM:
McKirahan wrote:
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 11 '05 #4

P: n/a
"Randy Webb" <Hi************@aol.com> wrote in message
news:yb********************@comcast.com...
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly


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>

Oct 11 '05 #5

P: n/a
On 11/10/2005 17:33, McKirahan wrote:
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

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Oct 12 '05 #6

P: n/a
McKirahan said the following on 10/11/2005 1:46 PM:
"Randy Webb" <Hi************@aol.com> wrote in message
news:yb********************@comcast.com...
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 12 '05 #7

P: n/a
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

--
Rob
Oct 12 '05 #8

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:s6******************************@comcast.com. ..
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.
Oct 12 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.