Why doesn't (this.form) work in my example?

[nelsonm]

Hi all,

I know i can use "document.getElementById('login')" to reference the form element but i want to use "this.form".

From all i've read, using "this.form" is supposed to reference the current form element but the alert says "undefined".

What am i doing wrong?

function checkLogin(Form){
alert('Form: '+Form);
}

<form name="login" id="login" action="" method="post">
<input class="input" id="UserName" type="text"/>
<input class="input" id="PassWord" type="password"/>
<a href="#" onclick="checkLogin(this.form);">log in</a>
</form>

[Fotiman]

Only form elements have a form attribute that refers to the containing form element. For example, if you put that onclick in an <input> element, then it would work as you expect.

[nelsonm]

Man.... developing web apps is like trying to program in the dark through a mine field while reading 4 technical manuals with a little flashlight.

I just keep running little issues like this. If it wasn't for the internet with it's wealth information, examples and help from knowledgeable people like you, it would take me 3 times as long to get to the end of a project.

Someone should write a book entitled "101 things to avoid when programming web apps".

Thanks...

[rocknbil]

More like 1001. :-) If you **must** do it this way it would be something like

<a href="#" onclick="return checkLogin(document.getElementById('login'));">

or, if it's the first form in the document,

<a href="#" onclick="return checkLogin(document.forms[0]);">

Adding one to your list, you **should** use a normal submit button and style it like you wish. The reason being, if Javascript is disabled, you have nothing to trigger submitting your form.

I had trouble with the form object at first. You approach it like this.

<form action="" onsubmit="return checkLogin(this);">

.. Instead of attaching it to the submit. When someone presses the enter key, it uses the next submit button in the form, which may or may not be the actual submit button. In your case it is, it's a synonymous action, but it's a good habit to form.

The second part is the application of return, and it applies to forms as well as links. You want a return value from your function - this is what stops the form from submitting on error (or a link from navigating.) True allows the form to submit, false stops it's natural action. In your original form, you'd want to return false in all cases - you don't want the link to navigate:

function checkLogin(Form){
alert('Form: '+Form); // You will see the word "object" - it's a form object
if (there are NO ERRORS) { Form.submit(); }
return false; // stop link navigation
}

But if you use an actual submit button with the trigger on the form itself as shown, it's not the form and not the link we're focused on:

function checkLogin(Form){
alert('Form: '+Form);
if (there is some error) { return false; }
return true;
}

Why don't I have an else for "return true?" if there is an error, it will return false and exit the function at that point.