id and problem in Firefox

  • Thread starter R. Rajesh Jeba Anbiah
  • Start date
R

R. Rajesh Jeba Anbiah

In IE, I could be able to directly refer the "id", but it isn't
possible in Firefox. Somewhere I read the solution is to refer the id
like document.getElementById("month") in Firefox. If I do so, the
script works well in Firefox, but IE throws error. (I have added the
code snippet below).

So, my question is: is there anyway to make the script work in all
browser *without* any browser fix ie, without adding any browser
detection check? Is this behavior is only for Firefox or any other
browsers also work like this (I don't have access to many browsers to
test)? TIA

<snippet>

<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function PopulateMonths()
{
//month is id used with select
//month = document.getElementById("month"); //<-- for Firefox
month.options.length = 0; //clear options
for(var i=1; i<=12; ++i)
{
opt = new Option();
opt.text = i;
opt.value = i;
month.options[i-1] = opt;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--month options-->
<SELECT name="month" id="month">
</SELECT>
<!--calling script-->
<SCRIPT>
PopulateMonths(); //calling populate for the above options
</SCRIPT>
</BODY>

</snippet>
 
C

Colin McKinnon

R. Rajesh Jeba Anbiah said:
In IE, I could be able to directly refer the "id", but it isn't
possible in Firefox. Somewhere I read the solution is to refer the id
like document.getElementById("month") in Firefox. If I do so, the
script works well in Firefox, but IE throws error. (I have added the
code snippet below).
Click to expand...
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function PopulateMonths()
{
//month is id used with select
//month = document.getElementById("month"); //<-- for Firefox
month.options.length = 0; //clear options
for(var i=1; i<=12; ++i)
{
opt = new Option();
opt.text = i;
opt.value = i;
month.options[i-1] = opt;
}
}
Click to expand...
<SELECT name="month" id="month">
</SELECT>
<!--calling script-->
<SCRIPT>
PopulateMonths(); //calling populate for the above options
</SCRIPT>
Click to expand...

Odd, similar works OK for me across both IE and Firefox. Maybe IE is getting
upset because your assigning the widget to a variable with the same name as
an HTML Element in the same DOM scope? Try enclosing the select in
<form>...</form> or change the JS variable name.

HTH

C.
 
M

Mark Preston

R. Rajesh Jeba Anbiah said:
In IE, I could be able to directly refer the "id", but it isn't
possible in Firefox. Somewhere I read the solution is to refer the id
like document.getElementById("month") in Firefox. If I do so, the
script works well in Firefox, but IE throws error. (I have added the
code snippet below). [snip]

<snippet>

<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function PopulateMonths()
{
//month is id used with select
//month = document.getElementById("month"); //<-- for Firefox
month.options.length = 0; //clear options
for(var i=1; i<=12; ++i)
Click to expand...
[snip]

I have no problem using code like yours in MSIE - perhaps you have an
older version of IE where the problem arises? Certainly in modern
versions, the W3C standard DOM and object methods like getElementById
sholud work perfectly well.

Don't bother to "detect browsers" though - check the objects and methods
themselves so you can do something like:-

if (document.getElementById) month = document.getElementById ("month")
else {
if (document.all && <your MSIE object/method>) {
// do MSIE code here
}
}
 
R

Robert

<SELECT name="month" id="month">

Also, I'd make these variables different.

Robert
 
D

DU

R. Rajesh Jeba Anbiah said:
In IE, I could be able to directly refer the "id", but it isn't
possible in Firefox. Somewhere I read the solution is to refer the id
like document.getElementById("month") in Firefox. If I do so, the
script works well in Firefox, but IE throws error. (I have added the
code snippet below).

So, my question is: is there anyway to make the script work in all
browser *without* any browser fix ie, without adding any browser
detection check? Is this behavior is only for Firefox or any other
browsers also work like this (I don't have access to many browsers to
test)? TIA

<snippet>

<HEAD>
<SCRIPT LANGUAGE=javascript>
Click to expand...

<!--
function PopulateMonths()
{
//month is id used with select
Click to expand...

But you also use name="month" in your code. So, there is a confusion
already here.
//month = document.getElementById("month"); //<-- for Firefox
month.options.length = 0; //clear options
for(var i=1; i<=12; ++i)
{
opt = new Option();
opt.text = i;
opt.value = i;
month.options[i-1] = opt;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--month options-->
Click to expand...

You need to insert said:
<SELECT name="month" id="month">
</SELECT>
<!--calling script-->
<SCRIPT>
PopulateMonths(); //calling populate for the above options
</SCRIPT>
</BODY>

</snippet>
Click to expand...

I would validate your HTML markup code first of all, preferably with a
strict doctype decl. because that will trigger MSIE 6 into web standards
compliant rendering mode.

List of valid DTDs you can use in your document.
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Like someone else in the thread said, you first need to embed that
<select> inside a <form>. <form> also requires an action attribute.

Your populate select function could be streamlined a bit and clarified also:

function PopulateMonths()
{
var objMonthSelect;
if(document.getElementById)
{
objMonthSelect = document.getElementById("month");
}
else if(document.all && !document.getElementById) // MSIE 4 only
{
objMonthSelect = month;
};
objMonthSelect.options.length = 0; //clear options
for(var i=0; i<12; i++)
{
opt = new Option();
opt.text = i;
opt.value = i;
objMonthSelect.options = opt;
};
}

You should also always use differential (and preferably meaningful)
identifiers for name attribute and id attribute for several reasons:
code reviewing by others, better discrimination of how your code
accesses nodes, better understanding of your code inner logic. <select
name="month" id="month"> just confuses the way certain browser actually
accesses nodes when one does
month.[some attribute]

Since above 96% of all browsers in use out there support flawlessly
getElementById method, then there is no problem with replacing
month
by
document.getElementById("month")
with proper object support for that method

Finally, I recommend you always call functions like PopulateMonths() on
the onload event of the body element, not as the document is being
parsed and rendered for several reasons.

DU
 
R

R. Rajesh Jeba Anbiah

Odd, similar works OK for me across both IE and Firefox. Maybe IE is getting
upset because your assigning the widget to a variable with the same name as
an HTML Element in the same DOM scope? Try enclosing the select in
<form>...</form> or change the JS variable name.
Click to expand...

Great! Your solutions work like a charm! Thanks for your time and help.
 
R

R. Rajesh Jeba Anbiah

<snip>

Many thanks to all the experts who answered in this thread. Your
solutions and answers are really helpful.
//month is id used with select
//month = document.getElementById("month"); //<-- for Firefox
month.options.length = 0; //clear options
for(var i=1; i<=12; ++i)
Click to expand...
[snip]

I have no problem using code like yours in MSIE - perhaps you have an
older version of IE where the problem arises?
Click to expand...

I'm using new versions of IE and Firefox. Colin McKinnon, Robert
and DU solutions are working great. Many thanks again.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Duplicate ID issue when trying to copy table row 1
I am trying to detect Which image id="" was clicked ? 22
Script working in Firefox but not Chrome and Safari 3
About as basic "Newbie-Question" that you can get. 3
Using CSS ID Tags to 2
How do I fix this issue in sqaurespace code block? 1
Multi select options in a menu 1
Need help with <rowspan> in an HTML table 1

Members online

No members online now.
Total: 124 (members: 0, guests: 124)
Robots: 217

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top