473,748 Members | 4,951 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.getEle mentById("t1"). value =
document.getEle mentById("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 "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.

Oct 11 '05 #1
8 8438

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.getEle mentById("t1"). value =
document.getEle mentById("s1"). innerHTML;
}
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.
</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.


Oct 11 '05 #2
"web.dev" <we********@gma il.com> wrote in message
news:11******** *************@g 49g2000cwa.goog legroups.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.getEle mentById("t1"). value =
document.getEle mentById("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>FFinne r.htm</title>
<script type="text/javascript">
function clicks() {
document.getEle mentById("t1"). value =
document.getE lementById("s1" ).innerHTML;
}

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.


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
Oct 11 '05 #4
"Randy Webb" <Hi************ @aol.com> wrote in message
news:yb******** ************@co mcast.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.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


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>

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******** ************@co mcast.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.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

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.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>


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
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.selected Index].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.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
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.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.
Oct 12 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
8640
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 s = document.getElementById("s"); s.innerHTML = '<option>Opt1</option><option>Opt2</option>'; }
24
3507
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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w3.org/1999/xhtml"> <head> <script language="javascript">
5
3001
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 <<<<<<<<<<<<<<CODE>>>>>>>>>>>>>>>> <html>
4
8026
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 here: http://www.publicdomainsoftware.org/ajaxExperiment.htm Click in any box to get the controls with which you can play around. This function below, askForInput, was working the way I wanted, till I tried to give it two parameters, one...
3
1927
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 enough to get the idea). Here is the code: ----------------------------------------------------------------- <html>
1
6144
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 value=1 OnClick="RichtText('Bold')"><b>B</b> <input type=checkbox name=under value=1 OnClick="RichtText('underline')"><u>U</u>
1
5018
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" name="hulpform"> <select name="varVervuld" id="varVervuld" onChange="alert('Onchange');Vervuld(this.options);"> <option value="0" selected="selected">&nbsp;</option> <option value=JA>Ja</option>
6
3188
by: nigelesquire | last post by:
Hi, I have the following code working great in Firefox but not IE. Please help... <html> <head>
1
3655
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 completion component Copyright (C) 2005 Joe Kepley, The Sling & Rock Design Group, Inc. This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software...
0
9367
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9319
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9243
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8241
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6073
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4599
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3309
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2780
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2213
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.