Firefox does not reflect selected option via innerHTML

**web.dev** · Oct 11 '05, 05:15 PM

Re: Firefox does not reflect selected option via innerHTML

McKirahan wrote:[color=blue]
> 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.getEle mentById("t1"). value =
> document.getEle mentById("s1"). innerHTML;
> }[/color]

Why are you using innerHTML? Do the following instead:

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

taObj.value = selObj[selObj.selected Index].value;
}

Works in both FF and IE.
[color=blue]
> </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 "setAttribu te":
> <input type="text" value="initial"
> onblur="this.se tAttribute('val ue',this.value );" />
> So I guess I'm looking for something comparable for the <select> tag.[/color]

**McKirahan** · Oct 11 '05, 05:35 PM

Re: Firefox does not reflect selected option via innerHTML

"web.dev" <web.dev.cs@gma il.com> wrote in message
news:1129050083 .418376.83620@g 49g2000cwa.goog legroups.com...
[color=blue]
>McKirahan wrote:[color=green]
>> 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.getEle mentById("t1"). value =
>> document.getEle mentById("s1"). innerHTML;
>> }[/color]
>
>Why are you using innerHTML? Do the following instead:[/color]

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

[snip]

**Randy Webb** · Oct 11 '05, 05:45 PM

Re: Firefox does not reflect selected option via innerHTML

web.dev said the following on 10/11/2005 1:01 PM:
[color=blue]
> McKirahan wrote:
>[color=green]
>>Firefox does not reflect selected option via innerHTML
>>
>>How do I get Firefox to reflect selected option values?
>>
>><html>
>><head>
>><title>FFinne r.htm</title>
>><script type="text/javascript">
>>function clicks() {
>> document.getEle mentById("t1"). value =
>>document.getE lementById("s1" ).innerHTML;
>>}[/color]
>
>
> Why are you using innerHTML? Do the following instead:
>
> function clicks()
> {
> selObj = document.getEle mentById("s1");
> taObj = document.getEle mentById("t1");
>
> taObj.value = selObj[selObj.selected Index].value;
> }
>
> Works in both FF and IE.[/color]

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.selected Index].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.selected Index].value to access the value of
a select item.

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

**McKirahan** · Oct 11 '05, 05:55 PM

Re: Firefox does not reflect selected option via innerHTML

"Randy Webb" <HikksNotAtHome @aol.com> wrote in message
news:ybydnUH3q5 R8atbeRVn-pg@comcast.com. ..[color=blue]
> web.dev said the following on 10/11/2005 1:01 PM:[/color]

[snip]
[color=blue]
> 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.selected Index].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.selected Index].value to access the value of
> a select item.
>
> --
> Randy
> comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly[/color]

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.getEle mentById("t1"). value =
document.getEle mentById("s").i nnerHTML;
}
function click2() {
document.forms[0].t2.value = document.getEle mentById("s").i nnerHTML;
}
</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>

**Michael Winter** · Oct 12 '05, 12:15 AM

Re: Firefox does not reflect selected option via innerHTML

On 11/10/2005 17:33, McKirahan wrote:
[color=blue]
> Firefox does not reflect selected option via innerHTML
>
> How do I get Firefox to reflect selected option values?[/color]

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]
[color=blue]
> <span id="s1">
> <form>[/color]

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.

**Randy Webb** · Oct 12 '05, 12:15 AM

Re: Firefox does not reflect selected option via innerHTML

McKirahan said the following on 10/11/2005 1:46 PM:
[color=blue]
> "Randy Webb" <HikksNotAtHome @aol.com> wrote in message
> news:ybydnUH3q5 R8atbeRVn-pg@comcast.com. ..
>[color=green]
>>web.dev said the following on 10/11/2005 1:01 PM:[/color]
>
>
> [snip]
>
>[color=green]
>>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.selected Index].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.selected Index].value to access the value of
>>a select item.
>>
>>--
>>Randy
>>comp.lang.jav ascript FAQ - http://jibbering.com/faq & newsgroup weekly[/color]
>
>
> Because <span> is not in the forms collection.[/color]

Forms can't be children of span's either.
[color=blue]
> 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.getEle mentById("t1"). value =
> document.getEle mentById("s").i nnerHTML;
> }
> function click2() {
> document.forms[0].t2.value = document.getEle mentById("s").i nnerHTML;
> }
> </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>[/color]

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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

**RobG** · Oct 12 '05, 04:05 AM

Re: Firefox does not reflect selected option via innerHTML

Randy Webb wrote:
[...][color=blue]
>
> 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.selected Index].value to access the value of
> a select item.[/color]

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.val ue: ' + this.value + '\n'
+ 'this.text: ' + this.text + '\n'
+ 'this[this.selectedIn dex].text: '
+ this[this.selectedIn dex].text )
">
<option>red
<option>green
<option>blue
<option>black
</select>

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

--
Rob

**McKirahan** · Oct 12 '05, 07:55 PM

Re: Firefox does not reflect selected option via innerHTML

"McKirahan" <News@McKirahan .com> wrote in message
news:s6ednRsFWa PedNbenZ2dnUVZ_ s2dnZ2d@comcast .com...[color=blue]
> Firefox does not reflect selected option via innerHTML
>
> How do I get Firefox to reflect selected option values?[/color]

[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.selectedIn dex) {

that.options[that.selectedIn dex].setAttribute(" selected","sele cted");
}
}
} else if (that.type == "text") {
that.setAttribu te("value",that .value);
}
}
function clicks() {
document.getEle mentById('t').v alue =
document.getEle mentById("d").i nnerHTML;
}
</script>
</head>
<body>
<div id="d">
<form>
<select onblur="blurs(t his)">
<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(t his)">
<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(th is)>
<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(th is) 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(t his)">
<option value=""></option>
<option selected="selec ted" 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(t his)" 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.

Firefox does not reflect selected option via innerHTML

Firefox does not reflect selected option via innerHTML

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment