用Javascript代码点击HTML表单的提交按钮

Question

我对WEB编程不是很了解，如果我漏掉了任何细节，请随意询问。

我经常访问一个特定的网站，每次访问都需要用户登录。对于这个网站的登录页面，我正在尝试编写一个用户脚本，以便自动登录。

我成功填写了表单字段，但不知道如何使用JavaScript点击提交按钮。以下是原始登录代码的缩减版本。如何在此代码中自动点击提交按钮？

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

- hkBattousai

Answer 1

一般提交表单的常规方式是在表单本身上调用submit()，如krtek的回答所描述的那样。

然而，如果您因某些原因需要实际点击提交按钮（例如，您的代码依赖于提交按钮的名称/值被发布或其他原因），则可以像这样点击提交按钮：

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

- mercurial

---

我使用按钮名称来检查其执行的操作，这样可以解决问题，而无需重新思考系统或从js添加隐藏字段。 - Lesto

实际上，我在尝试在Chrome（39）中使其正常工作时遇到了真正的问题。无论我以编程方式单击哪个按钮，它似乎总是提交一个（第一个）按钮的名称。在IE11中似乎很好：-(我确实在其中使用了jQuery...我希望这与jQuery无关。 - mwardm

除了答案之外，我注意到如果你使用JS点击按钮提交表单，表单会被提交两次。如果你使用submit()函数通过JS提交表单并且仍然在表单中有按钮，这种情况也会发生。如果你从表单中移除按钮，并使用submit()函数提交表单，那么表单只会被提交一次。 - Kappacake

Answer 2

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

或者，使用与onclick处理程序相同的代码：

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

尽管那个onclick处理程序写得有些愚蠢：document.forms['loginForm']可以替换为this。

- Matt Ball

---

document.getElementById('loginSubmit').submit(); ... 错误：submit() 不是一个函数 ... 如果您需要点击按钮，则mercurial的答案是正确的。 - Christian Michael

正如@Christian Michael所说，这个答案似乎是错误的。也许它在MSIE中起作用了？ - www-0av-Com

Answer 3

您可以做：

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

但这样不会触发按钮的onclick事件，因此您需要手动调用它。

请注意，您必须使用表单的name而不是id来访问它。

- krtek