Ajax problems in IE/Firefox

Question

Hi I have an ajax script which validates the users information put into textboxes. This is working fine in Internet Explorer, but in FireFox I get an error in getting the gender from a listbox. I have got the gender to be placed into a hidden textbox, for easier processing. The error I get in FF is

dd is null [Break on this error] theindex = dd.options[dd.selectedIndex].value;

My function in javascript is below, this is loaded on body load or once the gender selected is changed,

function get_gender() {
{

    var dd = document.getElementById("gender_select");
    theindex = dd.options[dd.selectedIndex].value;
    thevalue = dd.options[dd.selectedIndex].text;
    }

    document.getElementById("gender_text").value = thevalue;  

}

One other problem I am having is hidding a div box, this works fine in every other browser but not IE. It should only show the div box once an error is given, but in IE the div box is always shown.

I am using this line to do this: document.getElementById("username_div").style.visibility = "hidden";

Rather than pasting all my code the live page can be viewed at

http://elliottstocks.com/assignment/sign_up/ Ignore the login box, this works fine.

Any comments/help will be appreciated. Thanks alot =)

Answer 1

For the null error change:

<select onchange="get_gender()" name="gender_select">

to

<select onchange="get_gender()" name="gender_select" id="gender_select">

document.getElementById is looking for an element in the DOM that has a given id attribute. The reason it works in IE is because it allows selecting by name attribute as well.

Answer 2

getElementByID requires the HTML element to have an ID, just a name isn't good enough.

<select name="gender_select" id="gender_select" onChange="get_gender()">
  <option>Male</option> <option>Female</option>  
</select>

Answer 3

For your second problem, you may want to try display = 'none'; for your element. Be aware that this behavior is different from visibility = hidden.