Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > firefox and innerHTML

Reply
Thread Tools

firefox and innerHTML

 
 
bedhead
Guest
Posts: n/a
 
      07-10-2005
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">
function callAlert(){
var theHTML = document.getElementById('Radius').innerHTML;
//alert(theHTML);
}
</script>
<title>Untitled Document</title>
</head>

<body>
<form id="myForm">
<div id="myDiv">
<table border="0" width="430" cellpadding="3" cellspacing="0">
<tr>
<td font color="#ff0000">*</font>Radius:</td>
<td width="331" height="30" class="formData">
<select onChange="callAlert();" id="Radius" name="Radius">
<option value=".10" id="0">1/10 mile</option>
<option value=".20">1/5 mile</option>
<option value=".25">1/4 mile</option>
<option value=".5">1/2 mile</option>
<option value=".75">3/4 mile</option>
<option value="1">1 mile</option>
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

 
Reply With Quote
 
 
 
 
Michael Winter
Guest
Posts: n/a
 
      07-10-2005
On 10/07/2005 23:20, bedhead wrote:

> Why doesn't a SELECT element's innerHTML reflected which option was
> selected?


The selected attribute refers to pre-selection, not whether the element
is currently selected. Markup is static and doesn't change in response
to user actions.

> I need this functionality so that I can retain what choices a user
> made in a tabbed interface.


Read the values from object properties and reassign them later.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
 
Reply With Quote
 
 
 
 
Mick White
Guest
Posts: n/a
 
      07-10-2005
bedhead wrote:
> 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.


What are you looking for? The option's value, the option's text or the
option's selected index?
[...]
>
> <script language="javascript">
> function callAlert(){
> var theHTML = document.getElementById('Radius').innerHTML;
> //alert(theHTML);
> }
> </script>


Why not pass the select object to the callAlert function?

<script type="text/javascript">
function callAlert(menu){
alert(menu.options[menu.selectedIndex].value);
alert(menu.options[menu.selectedIndex].text);
alert(menu.selectedIndex);
}
</script>

<select onChange="callAlert(this);" id="Radius" name="Radius">

Help?
[...]

Mick
 
Reply With Quote
 
Stephen Chalmers
Guest
Posts: n/a
 
      07-10-2005
bedhead <(E-Mail Removed)> wrote in message news:(E-Mail Removed) oups.com...
> 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.


http://jibbering.com/FAQ/#FAQ4_13

Using the above technique, assign your form a NAME not an ID. Reading form elements does not involve
document.getElementById or .innerHTML. Please tell all your friends and ask them to tell all their friends etc.

--
Stephen Chalmers


 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      07-10-2005
"Stephen Chalmers" <(E-Mail Removed)> writes:

> http://jibbering.com/FAQ/#FAQ4_13
>
> Using the above technique, assign your form a NAME not an ID.


I assume you refer to "id" and "name" attributes, but capitalizing
risks confuzing with HTML data types ID and NAME
<URL:http://www.w3.org/TR/html4/types.html>.

Anyway, give it an "id" attribute, not a name attribute, if you are
writing HTML 4 or later. The "name" attribute is not valid on form
elements at all. The only reason for using the "name" attribute is to
be compatible with Netscape 4 or its contemporaries, and in that case,
you should still use the valid "id" attribute with the same name.

The W3C DOM 2 HTML says that the forms collection (an
HTMLNodeCollection) can be indexed using the elements names or id's,
so using an "id" attribute still works.

/L
--
Lasse Reichstein Nielsen - http://www.velocityreviews.com/forums/(E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      07-11-2005
Lasse Reichstein Nielsen wrote:
> The "name" attribute is not valid on form
> elements at all. The only reason for using the "name" attribute is to
> be compatible with Netscape 4 or its contemporaries, and in that case,
> you should still use the valid "id" attribute with the same name.


1) name attributes on form tags certainly is valid html 4.01.

2) Multiple forms can have the same name, but multiple forms may not have
the same id. In some cases, this might be an important fact.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      07-11-2005
On 11/07/2005 01:06, Matt Kruse wrote:

> Lasse Reichstein Nielsen wrote:
>
>> The "name" attribute is not valid on form elements at all. The only
>> reason for using the "name" attribute is to be compatible with
>> Netscape 4 or its contemporaries, and in that case, you should
>> still use the valid "id" attribute with the same name.

>
> 1) name attributes on form tags certainly is valid html 4.01.


Correct. They're also valid in XHTML 1.0 Transitional (but not Strict).

> 2) Multiple forms can have the same name [...]


No. The name and id attributes share the same namespace for most
elements. The uniqueness constraint applies equally when using either
attribute with a FORM element, as well as A, APPLET, FRAME, IFRAME, IMG
and MAP elements. See a few paragraphs into section 12.2.3 - Anchors
with the id attribute.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
 
Reply With Quote
 
bedhead
Guest
Posts: n/a
 
      07-11-2005
Thanks for all the replies. Sorry for the confusion. This is just a
small example. I am getting the innerHTML of a DIV tag which
encompasses a very large form. I didn't want to get all the selected
indexes, checked, etc... of all elements in the form and restore them
later.

IE actually changes the innerHTML of the DIV to reflect what the user
selected. So, if you save the innerHTML you have their choices. I
would like to do a similar thing in FireFox if available.

Does innerHTML have similar functionality in FireFox? If not, is
saving all the current choices the only way to accomplish this?

Thanks

 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      07-11-2005
"Matt Kruse" <(E-Mail Removed)> writes:

> 1) name attributes on form tags certainly is valid html 4.01.


So it is! It was just HTML 4.0 where it wasn't. It's not incorrect that
it's for compatability with old browsers though, as they say:
---
name = cdata [CI]
This attribute names the element so that it may be referred to from
style sheets or scripts. Note. This attribute has been included for
backwards compatibility. Applications should use the id attribute to
identify elements.
---
For style sheets, they have to mean using the [name="something"]
selector which IE still doesn't support (like most CSS2).

> 2) Multiple forms can have the same name, but multiple forms may not have
> the same id. In some cases, this might be an important fact.


And whenever a form has both an id and a name, it must be the same

I fail to see an application where multiple forms with the same
element is the best way to do anything, but it is allowed.

/L 'just use "id"!'
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      07-11-2005
bedhead wrote:
> Thanks for all the replies. Sorry for the confusion. This is just a
> small example. I am getting the innerHTML of a DIV tag which
> encompasses a very large form. I didn't want to get all the selected
> indexes, checked, etc... of all elements in the form and restore them
> later.
>
> IE actually changes the innerHTML of the DIV to reflect what the user
> selected. So, if you save the innerHTML you have their choices. I
> would like to do a similar thing in FireFox if available.
>
> Does innerHTML have similar functionality in FireFox?


No. Given that 'innerHTML' is not a public standard nor fully
documented anywhere, whatever behaviour it has is what it has. As it is
a Microsoft invention, you could argue that any browser that doesn't do
what IE does has a faulty implementation.

But IE's version has its own problems: if you serialise the select
element with the user's currently selected options as 'selected', you
will need to code your own reset button as the original defaults are gone.

If you restore the page with the previously selected options being set
as 'selected' in the HTML, you will have the same problem however you
implement it - you will have to provide your own reset button.

> If not, is
> saving all the current choices the only way to accomplish this?


Why not use display: none for non-selected tabs? The content stays in
the page and there are no issues with restoring forms. If you do the
layout right, with JavaScript disabled the tabs should just appear one
above the other and have anchors to navigate between them. With JS
enabled, they behave like tabs - hiding and showing the relevant bits.


--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript, Firefox, InnerHTML and AJAX garth@garthmorton.com Javascript 6 07-29-2007 12:32 AM
xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM sonic Javascript 5 07-11-2006 08:17 AM
Problem with .innerHTML, AJAX and Firefox tcole6@gmail.com Javascript 4 07-05-2006 12:24 PM
DIV and InnerHTML differences IE/Firefox Hoss Javascript 7 03-27-2006 11:39 PM
FireFox/innerHTML and <area> tags Brad Javascript 1 10-30-2004 10:04 AM



Advertisments