Question

I’m new to the scope of ‘this’ in html, javascript.

So after looking at some SO posts I’ve discovered that there can be subtle differences in the ‘scope’ of the ‘this’ entity.

Here’s where I ran into my issue: (EDIT: all code in my post resides in the file index.php)

<form enctype="multipart/form-data"
      class="registerFormStyles" name="registerForm" 
      action="index.php" method="post">
 <input type="text" value="Username">
 <input type="text" value="Password">
 <a href="#" name="newUserRegister" class="login-button-landing" 
            onclick="document.registerForm.submit();">Login</a>
            <!-- onclick="this.submit();">Login</a> -->
</form>

This code causes a reload of the page with the above form on it —
the evidence is the typed-in user name and password flash back
to their default value=”Username” and value=”Password” when I
click the ‘Login’ button — the ‘a’ anchor, owing to its
CSS styling, is a button that conforms to UI guidelines
that are in force across the entire web site.

(Do I suspect styling a ‘submit’ button is preferable vis-a-vis
‘will break without javascript’ ? Yes I do. Do I have a choice
here? No. Using a standard type=”submit” is not an option I have to
work with.)

Although it’s visually obvious that the page gets reloaded when
I enter a user name, password and then click ‘Login’ — I do
this at the top of the file in the php section:

  var_dump($_POST);

and the POST array is always empty.

So my question is about the scope of the ‘this’ in my code above:

  onclick="this.submit();"

Does the ‘this’ refer to the form or to the ‘a’ anchor within which I
am calling “this.submit” ?

Note that I also tried to do the form’s post by way of

onclick="document.registerForm.submit();"

This gave the same outcome — the ‘username’ and ‘password’ fields
go back to their default values but the POST array is empty.

All I need to do is to cause a proper POST of the above form when the
‘a’ anchor ‘Login’ is clicked — and I thought using “this.submit()” should
work — but the POST array is always empty. Why?

Answer 1

You are lacking the name attribute for your form fields.

<input type="text" name="user" value="Username">
<input type="text" name="pass" value="Password">

Edit
Also, this refers to the element in which it is called. In your example, this would refer to the <a> tag.