Simple javascript only working in FireFox

Question

Hello, all..

I created a script that requires selecting a beginning year then only displays years from that Beginning year -> 2009. It's just a startYear to endYear Range selector.

The script only works in firefox. I'm LEARNING javascript, so I'm hoping someone can point me into the right direction. Live script can be found at http://motolistr.com

<script type="text/javascript">
function display_year2(start_year) {
//alert(start_year);
if (start_year != "Any") {
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }

    var x = 2009;
    while (x >= start_year) {
        var optn = document.createElement("OPTION");
        optn.text = x;
        optn.value = x;
        document.form.year2.options.add(optn);
        //alert(x);
        x--;
    }
}
else 
{
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Any";
    optn.value = "Any";
    document.form.year2.options.add(optn);
} // end else
} // end function
</script>

Any ideas?

Thanks, Nick

Answer 1

Googling around i found some thing about a problem with createElement in IE: http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html

There is also a link to a page with a workaround. Hope this helps you.

Answer 2

Although it is not a solution to your problem; you're referring to your input field the incorrect way: document.form.year2 should be document.getElementById('year2'). I also noticed that your current script works in Opera.

Answer 3

You are trying to set an onclick event on each option. IE does not support this. Try using the onchanged event in the select element instead.

Instead of this:

<select name="year1" id="year1">
    <option value="Any" onclick="javascript:display_year2('Any');" >Any</option>
    <option value="2009" onclick="javascript:display_year2(2009);" >2009</option>
    <option value="2008" onclick="javascript:display_year2(2008);" >2008</option>
</select>

Try this:

<select name="year1" id="year1" onchange="javascript:display_year2(this.options[this.selectedIndex].value)">
    <option value="Any">Any</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
</select>

Answer 4

Try setting the length manually.

document.form.year2.options.length = number_of_items.

Answer 5

The reason it doesn't work isn't in your code snippet:

<OPTION onclick=javascript:display_year2(2009); value=2009>

Option.onclick is not an event that is generally expected to fire, but does in Firefox. The usual way to detect changes to Select values is via Select.onchange.

Also, you do not need to include "javascript:" in event handlers, they are not URLs (also, never ever use javascript: URLs). Also, quote your attribute values; it's always a good idea and it's required when you start including punctuation in the values. Also, stick to strings for your values - you are calling display_year2 with a Number, but option.value is always a String; trying to work with mixed datatypes is a recipe for confusion.

In summary:

<select onchange="display_year2(this.options[this.selectedIndex].value)">
    <option value="2009">2009</option>
    ...
</select>

Other things:

var i;
for(i=document.form.year2.options.length-1;i>=0;i--)
{
document.form.year2.remove(i);
}

You can do away with the loop by writing to options.length. Also it's best to avoid referring to element names directly off documents - use the document.forms[] collection or getElmentById:

var year2= document.getElementById('year2');
year2.options.length= 0;

Also:

var optn = document.createElement("OPTION");
optn.text = x;
optn.value = x;
document.form.year2.options.add(optn);

HTMLCollection.add is not a standard DOM method. The traditional old-school way of doing it is:

year2.options[year2.options.length]= new Option(x, x);

Answer 6

hey guys, I am having a problem..The following code is functioning great on IE but nt on chrome..What should I do?

Select a credit card Master Card Visa Card Amex Diners