4 methods to get a form

there seems to be 4 methods to get a form that is in HTML.

the ones I have are:

<script>
onload = function() {
    document.getElementById("form1").firstname.value = "haha";
    document.forms["form2"].firstname.value = "heehee";
    document.forms[2].firstname.value = "hoohoo";
    document.form4.firstname.value = "wah ha";
}
</script>

<form id="form1">
    <input name="firstname" type="text">
</form>

<form id="form2">
    <input name="firstname" type="text">
</form>

<form id="form3">
    <input name="firstname" type="text">
</form>

<form name="form4">
    <input name="firstname" type="text">
</form>

HTML:

a test run is on http://www.0011.com/test_js/test_get_form.html

they seem to all work in IE 6, 7, Firefox 2, 3, and Safari 3. Are they all good ways of getting a form? It seems that forms[2] may not be so good since what if somebody adds a form in front and then forms[2] will no longer be forms[2] any more. Thanks!

 

Thanks for sharing this.

 

The newer versions of the browsers work with all those methods, but to support older browsers consider using a function like this:

function returnObjById( id )
{
if (document.getElementById)
var returnVar = document.getElementById(id);
else if (document.all)
var returnVar = document.all[id];
else if (document.layers)
var returnVar = document.layers[id];
return returnVar;
}

This way it checks which method is available in the browser, i.e. use returnObjById("form1")

 

blueribbon's right, IE needs document.all cause it's a tard.

Also, none of the forms are valid, so the actual script would be more complicated (forms cannot have inlines as direct children).