Question

I’m having trouble not being too familiar with how to debug such problems. In my HTML lets say I have a form:

<form name="myForm" >
   <table>       
    <tr>
     <td>
       <input type="radio" name="myType" value="val" onclick="someFunc(this.value)"checked > stuff here
       <input type="radio" name="myType" value="val2" onclick="someFunc(this.value)"> stuff2 here
     </td>
    ..
</form>

In Javascript code, I am referencing this by:

myForm.myType[0].checked

In IE this works fine, but not in Firefox. In Firefox I tried:

alert (myForm)

and also:

if (frmDateType == null)
{
    alert('null!');
}
else
{
    alert('not null!');
}

However, in both these cases Firefox doesn’t even display an alert, it is basically doing nothing though it is fine in IE. I have installed Firebug and it doesn’t show any errors (or at least I can’t find them). So I’m not sure how to debug such an issue, why I don’t see any errors and why Firefox doesn’t like MyForm? Any tips?

Answer 1

You are assuming that anything with a name attribute will get a global variable that matches. This is non-standard behaviour.

You shouldn’t be giving forms name attributes anyway, see the specification:

Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.

So, first replace the name attribute with an id.

<form id="myForm">

And then you can access the form via:

document.getElementById('myForm')

or

document.forms.myForm