Why isn't getElementById working here?

JavaScript
1

I’m trying to get an element by id, not starting from document but starting from a previously defined variable which is a form. But ff error console is saying myForm.getElementById is not a function. So it’s not happy with myForm being used (it works fine with document.get…). But when I do an alert of “myForm” is says HTMLFORMELEMENT, so it is there in the variable. So why can’t I reference from it?

here is excerpt from html

 <form id="lbi-comment-form"  method="post" onsubmit=" return checkFields(this)" action="insertComment.php">

and the js

function checkFields(form){
    var myForm= document.getElementById(form.id)
    var usersName=myForm.getElementById("name");
alert(usersName)
}
2

If you’re not using multiple form tags, you can just drop the references to the form.

function checkFields(){
    var usersName=document.getElementById("name");
    alert(usersName);
}
3

ids must be unique within a web page so there is no reason for starting from anywhere other than document when getting them.

4

Trying to use the id is just going to cause you grief. Use the form field name instead.


<input type="text" name="username">



function checkFields(form){
    var usersName = form.elements.username;
    alert(usersName);
}
5

Grief how? You still technically use the value of the ID attribute in either scenario.

6

It’s a semantic thing, but it boils down to the name of form elements always being available, whereas id attributes may not be.

ID attributes should be used for the form tag, and where labels are used, but they only account for some of the form elements, so you then need to use different techniques depending on if a form element contains an id attribute, or you need to add unique id attributes on to every form element you plan to use.

That is a part of why using the name of the the form elements can be more reliable.