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>

mercurial · Accepted Answer · 2014-04-21 14:18:50Z

55

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();

answered Apr 21, 2014 at 14:18

mercurial

5,5934 gold badges28 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lesto Over a year ago

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

mwardm Over a year ago

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.

Kappacake Over a year ago

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

Matt Ball · Accepted Answer · 2011-03-06 15:27:40Z

12

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.)

answered Mar 6, 2011 at 15:27

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

2 Comments

Christian Michael Over a year ago

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

www-0av-Com Over a year ago

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

krtek · Accepted Answer · 2011-03-06 15:28:11Z

8

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.

answered Mar 6, 2011 at 15:28

krtek

26.7k5 gold badges60 silver badges84 bronze badges

Collectives™ on Stack Overflow

Clicking submit button of an HTML form by a Javascript code

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related