Why am I getting a null value?

Question

I have an HTML form that looks like this:

ar form={
    formName: document.getElementById("contactus"),
    name: document.getElementById("name"),
    email: document.getElementById("email"),
    comment: document.getElementById("question")
};

//form submit
form.formName.addEventListener( "submit", checkform );

<form name="contactus" method="post" action="html_form_send.php">
    <label for="name">Name:</label><br /><input <input  type="text" name="name" maxlength="50" size="59" autofocus required/><br /><br />
    <label for="email">E-Mail Address:</label><br /><input  type="email" name="email" maxlength="50" size="59" required/><br /><br />
    <label for="question">Question:</label><br /><textarea name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
    <input class="c1_scButton" type="submit" value="send"/>
</form>

<script type="text/javascript" src="js/validate.js"></script>

The problem is that Firebug shows that form.formName is null, as are the rest of the form values. Why are they not acquiring the elements?

The ultimate goal of the script is to validate the form data. I think the rest of the form will work if the elements will load.

The `name` attribute is _not_ the same as the `id` attribute. — Oka, Mar 08 '16 at 16:37
ok, so it needs a separate id attribute in addition to the name. Thank you for that clarification. — David Brabson, Mar 08 '16 at 16:40

Giovanni Perillo · Answer 1 · 2016-03-08T16:42:58.550

2

Because you are trying to get the element by ID, when there is no ID in it.

Adding the ID to the form tag should solve the problem:

<form name="contactus" ID="contactus" method="post" action="html_form_send.php">

But you may prefer to change your approach to document.getElementsByName("theName"), since you are not using IDs at all.

Here you go: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

edited Mar 08 '16 at 16:42

answered Mar 08 '16 at 16:36

Giovanni Perillo

116
7

does the name field not serve as an ID? maybe a dumb question, but I am learning so please bare with me. – David Brabson Mar 08 '16 at 16:38
`ID` is used as a object name in the context, and `name` is used to submit a value – Giovanni Perillo Mar 08 '16 at 16:40
Nop! The name and the Id are two totally different things – fba_pereira Mar 08 '16 at 16:41
1

More info... http://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html – fba_pereira Mar 08 '16 at 16:41
1

Don't forget that if you use `getElementsByName()` you'll need to index it, since that returns a collection rather than a single element. – Barmar Mar 08 '16 at 16:46

score 0 · Answer 2 · edited May 23 '17 at 11:50

Your form has the name contactus, but you're trying to get it by id.

Also, there seems to be a mistake with the name input:

<input <input  type="text" name="name" maxlength="50" size="59" autofocus required/>

You'll probably want to remove the first <input.

Finally, if you include your JavaScript at the top of the page, it might run before the page has fully loaded, which means that the form and/or input elements might not be in the DOM yet.

To fix this is to add an event listener to be triggered when the DOM is ready. If you're using JQuery, you do this with:

$(document).ready(function(){
    //do stuff here
});

If you have no need for JQuery, don't include it just to do this. You can find more info on how to do this in the answers to this question.

score 0 · Answer 3 · answered Mar 08 '16 at 16:48

This will work sure..

<form name="contactus" id='contactus' method="post" action="html_form_send.php">
           <label for="name">Name:</label><br />
             <input  type="text" id='name' name="name" maxlength="50" size="59" autofocus required/><br /><br />
            <label for="email">E-Mail Address:</label><br />
            <input  type="email" id='email' name="email" maxlength="50" size="59" required/>
            <br /><br />
          <label for="question">Question:</label><br />
            <textarea name="question" id='question' maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
       <input class="c1_scButton" type="submit" value="send"/>
            </form>

Why am I getting a null value?

3 Answers3