473,388 Members | 1,326 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 software developers and data experts.

Firefox does not reflect selected option via innerHTML

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
8 8385

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
"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
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
"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
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
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
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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Michael Schuerig | last post by:
I'm trying to change the options of a select element by setting its innerHTML. Here's a demo case: <html> <head> <script language="javascript" type="text/javascript"> function addOpts() { var...
24
by: bedhead | last post by:
Why doesn't a SELECT element's innerHTML reflected which option was selected? Works in IE. I need this functionality so that I can retain what choices a user made in a tabbed interface. ...
5
by: Craig Keightley | last post by:
Please help, i have attached my page which worksin IE but i cannnot get the drop down menu to fucntion in firefox. Any one have any ideas why? Many Thanks Craig ...
4
by: Jake Barnes | last post by:
I wanted to teach myself AJAX this weekend so I sat down with Stuart Landgridge's book and I started to play around. I came up with a little page that you can add text and images to. You can see it...
3
by: patrickkellogg | last post by:
I have this code when you click the buttom is suppose to add a job history. it works with firefox, opera, but not ie. (please note - new entries don't have all the elements in them yet, but...
1
by: Saint's Knight | last post by:
here is code that i use. <html> <head> </head> <body> <form> <input type=checkbox name=source value=1 OnClick="SourceCode(source.checked)">Source <input type=checkbox name=bold...
1
by: Jan Doggen | last post by:
Hello all, I have a SELECT like this (the 'alert()s are temporary): <FORM method="POST" action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:1095144287.9159" id="hulpform"...
6
by: nigelesquire | last post by:
Hi, I have the following code working great in Firefox but not IE. Please help... <html> <head>
1
by: sva0008 | last post by:
i have a auto suggest script that does not work in firefox , works great on IE. /******************************************************* AutoSuggest - a javascript automatic text input...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.