Clicking submit button of an HTML form by a Javascript code

Question

I don't know much about WEB probramming, so feel free to ask if I'm missing any details.

There is a certain website which I'm visiting very frequently, and it requires users to log in every time they visit. For the login page of this website, I'm trying to write down a userscript which will automatically log me in.

I managed to fill in the form fields, but don't have any idea how to click the submit button by JavaScript. The below is a condensed version of the original login code. How can I automatically click this submit button in this code?

<div id="start">
    <div id="header">
        <div id="login">
            <form id="loginForm" name="loginForm" method="post" action="#">
                // ...
                <input type="submit" id="loginSubmit" onclick="changeAction('submitInput','loginForm');document.forms['loginForm'].submit();" value="Log in" />
                // ...
            </form>
        </div>
    </div>
</div>

Rubie

Answer 1

document.getElementById('loginSubmit').submit();

or, use the same code as the onclick handler:

changeAction('submitInput','loginForm');
document.forms['loginForm'].submit();

(Though that onclick handler is kind of stupidly-written: document.forms['loginForm'] could be replaced with this.)

Lavern

document.getElementById('loginSubmit').submit(); ... Error: submit() is not a function ... If you need to click the button, mercurial's answer is correct. – Intelligibility

As @Christian Michael says, this answer appears to be simply incorrect. Maybe it worked in MSIE? – Shillyshally

Answer 2

The usual way to submit a form in general is to call submit() on the form itself, as described in krtek's answer.

However, if you need to actually click a submit button for some reason (your code depends on the submit button's name/value being posted or something), you can click on the submit button itself like this:

document.getElementById('loginSubmit').click();

Psychodynamics

you answer is the real answer :) i use button name to check what action do, and this solve the problem without having to rethink the system, or add hidden field from js – Sydelle

Actually, I'm having real problems trying to get this to work in Chrome (39). It always seems to be submitting the name of one (the first) button regardless of which I programmatically click. Seems fine in IE11 :-( I do have jQuery in the mix... I'm hoping it's nothing to do with that. – Slide

in addition to the answer, I noticed that if you submit the form by using js to click the button, the form is submitted twice. This happens also if you use js to submit the form with submit() and still have the button in the form. If you remove the button from the form, and submit the form using submit(), the form is only submitted once – Ahrens

Answer 3

You can do :

document.forms["loginForm"].submit()

But this won't call the onclick action of your button, so you will need to call it by hand.

Be aware that you must use the name of your form and not the id to access it.

Decagon