How to autopopulate an HTML form and submit it instantly?

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 -

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.

i dont think you got this right, if it is the free user, no log in should be needed, just set it on the server side

Hi @Ibu, I know it may not make sense for you, but in my objective of the design of the software every user has to have a username and password, even free users. So they are given a default username and password.

3 Answers 3

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

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:

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.

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.

I suppose the downvote is because I dared to suggest a script-free answer. Or maybe I didn't include someone's favourite library, or they had a bad day, whatever. I think I can cop a 2 point penalty. :-)

If I understand your question right, and you want a button to populate the form fields before posting the form - just place your embedded code in a javascript function and set it as the click handler via the 'onclick' property of the button.

Ex:

Id question a design that means you need to populate the variables and not have them as defaults though! (Defaults can be set in the HTML) However, if that's the design spec then here's your code!

Edit To summarise all the comments below: this code wont work if you have an element in your form with the name 'submit' - ala most submit forms which get named submit! If you try and call this code the submit line will actually try and call the button; which is obviously not a function and you'll get this error here.

Uncaught TypeError: Property 'submit' of object is not a function. 

[jsFiddle with the error] [jsFiddle fixed] - Note only the submit button name has changed.

The explanation for this is here - well you learn something new everyday!

So you can either set the name of your button to something else - i.e. sub; or you can use GitaarLAB's solution of calling the click event on the submit button programmatically. (See the comments section for this)

Thanks for your answer. I would like that when I click the html link the I want to populate the files AND submit the HTML form.

Edited and done :) The code is in a separate function to make it a little neater than having it embedded as a HTML property.

hmm, I had a bingo to: asdf done. The trick is to add an ID to your submit-button, and then trigger it's click-event instead of submit();

You can still set them serverside, ie if a login-form submit is received without username/password, then override it with your default user/pass and continue your login-script.

Alternatively or on top of this, you could also set 1 or 2 extra hidden fields if you should wish to assign different default user/pass combinations dynamically.

More directly to your question, you already figured out how to populate one field.. so a second field is repeating the same trick. You can still use the default submit-buton from the form if you'd like to, but then you need Javascript running on the client. Submitting the form is traditionally done by document.forms[n].submit();
Yet document.getElementById('submit').click(); works so much better..

So all in all, for a graceful fallback, I'd advise 2 hidden form-fields and take care of the rest serverside.

UPDATE 3: Two versions based on my technique, now works perfectly.
Auto-logon:

 
Username: Password:   
  

Button (user initiated) auto-logon:

 
Username: Password: