Question

I have a simple HTML form with a username and password.

This HTML form contains a login for both free and paid users. Paid users need to enter a username and password, while free users have to enter default usernames e.g. Username = myname, and Password = password.

I managed to auto populate the values of the form using an HTML link –

<a href="#" onclick="document.getElementById('name').value='myname';document.getElementById('password').value='mypassword';" >Free User</a>

This worked smoothly. Now I would like to add the possibility that when the Free User clicks the button, the values are auto populated as above and the said HTML form is submitted immediately.

When I tried it using various methods, the fields would populate but the HTML form will not submit.

Thanks you.

Answer 1

Just set the defaults in the form, no script required:

User ID: <input type="text" name="userid" value="guest">
<br>
Password: <input type="password" name="password" value="password">
<br>
<input type="submit" value="Login">

If you really really must use script, then (noting that a form control with a name of “name” will mask the form’s name property so I’ve used something more suitable) use something like:

<input type="button" value="Guest Login" onclick="
  this.form.userid.value = 'guest';
  this.form.password.value = 'password';
  this.form.submit();
">

But frankly it’s a complete waste of time. If you put two submit buttons in the form, one for guests and one for registered users, then guests can click the guest submit button.

<input type="submit" name="registeredLogin" value="Registered User Login">
<input type="submit" name="guestLogin" value="Guest User Login">

Whichever button is clicked will be sent to the server so it can set appropriate permissions. If they’ve clicked the guest button, you don’t care what value they set for username or password, just ignore it.

Again, zero script required.