如何使用JavaScript提交表单？

Question

如何使用JavaScript提交表单？

289

我有一个ID为theForm的表单，其中包含以下带有提交按钮的

：

<div id="placeOrder"
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit"
            class='input_submit'
            style="margin-right: 15px;"
            onClick="placeOrder()">Place Order
    </button>
</div>

点击时，会调用函数placeOrder()。该函数将上面

的innerHTML更改为"processing ..."（因此提交按钮现在已消失）。

上面的代码可以正常工作，但现在问题是我无法提交表单！我尝试将以下内容放入placeOrder()函数中：

document.theForm.submit();

但是那样做不起作用。

我如何让表单提交？

- Nate

4

我理解你的页面上有一个 <form> 标签。 - Justin808

2

我在代码中没有看到任何<form>。 - dotoree

1

你的意思是什么：该函数将上面div的innerHTML更改为“processing ...”（因此提交按钮现在消失了）。你介意分享一下那个逻辑吗？顺便说一句，如果您有一个提交按钮（名称为submit），则theform.submit（）函数将无法正常工作。请通过添加<form>标记来澄清您的问题，就像您在代码中所做的那样。您可以使用http://jsfiddle.net。 - sakhunzai

6

如果你有一个提交按钮（名称为“submit”的某个地方），这解决了我的问题！它是<input type="button" name="submit"...，但仍然阻止 JavaScript 发送表单。 - Nikolay Ivanov

2

document.theForm.submit(); doesn't work, you'd rather need to use document.getElementById("theForm").submit(); and specify the form id in HTML, for example: <form id="theForm">(content)</form> - Unterbelichtet

12个回答

179

您可以使用...

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

...但不要替换innerHTML。您可以隐藏表单，然后插入一个处理中...span，它将出现在原来表单的位置。

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);

- alex

你如何告诉程序将表单发送到哪里？例如，在我的情况下，我希望将内容通过电子邮件发送给自己。 - CodyBugstein

@Imray 你可能需要服务器端的代码来为你完成这个任务。 - alex

@CodyBugstein，将您尝试提交的表单的action="/{controller}/{action-method}" method="post"属性设置好。 - phougatv

4

由于我的表单名称为printoffersForm且ID也相同。当我使用document.getElementById('printoffersForm').submit();提交表单时，出现了“submit不是函数”的错误。 - Madhuri Patel

1

@MadhuriPatel 你的提交按钮也可能被命名为submit了吗？请参考答案https://dev59.com/4HRA5IYBdhLWcg3wxA5N - rbassett

56

在我的情况下，它完美地运作。

document.getElementById("form1").submit();

此外，您可以在函数中使用它，如下所示：

function formSubmit()
{
    document.getElementById("form1").submit();
}

- Chintan Thummar

这个会提交来自input标签的表单值吗？ - simanacci

@roy 是的，它将提交来自输入标签的表单值。 - Chintan Thummar

2

@ChintanThummar，然后您可以使用以下代码处理表单提交：

document.getElementById("form1").onsubmit = function(){

  //您可以在此处使用Ajax代码提交表单
  //而不刷新页面

}

- Shubham Kumar

我还没有尝试过那个，但它看起来比我提供的更好。谢谢 ;) - Chintan Thummar

26

document.forms["name of your form"].submit();

或者

document.getElementById("form id").submit();

你可以尝试其中任何一种...这肯定会起作用...

- Aruna

为了让第一个起作用，我不得不将其更改为document.forms.namedItem("FormName").submit();。 - zsalya

14

您可以使用以下代码使用JavaScript提交表单：

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

- Abhijeet Navgire

14

<html>

    <body>

        <p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>

        <form id="myForm" action="/action_page.php">
          First name: <input type="text" name="fname"><br>
          Last name: <input type="text" name="lname"><br><br>
          <input type="button" onclick="myFunction()" value="Submit form">
        </form>

        <script>
            function myFunction() {
                document.getElementById("myForm").submit();
            }
        </script>

    </body>
</html>

- Jay Nagar

1

这个答案可能对一些人有帮助 https://dev59.com/VWgu5IYBdhLWcg3w8LWv#54619085 - Mayer Spitz

14

我将展示一种不使用表单内name标签提交表单的方法：

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JavaScript

function placeOrder(form){
    form.submit();
}

- SkyClasher

6

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

JavaScript

function placeOrder () {
    document.theForm.submit()
}

- Chandan Gupta

5

请在您的回答中添加一些解释。 - Sampada

这并不会提高已经给出的答案的质量。 - Randy

这是唯一一个在实际HTML表单定义中显示表单名称的答案。此外，它简单明了。 - Tim Bird

4

如果你的表单没有任何id，但是它有类名（class name）如theForm，你可以使用以下语句来提交它：

document.getElementsByClassName("theForm")[0].submit();

- Bimal Jha

如果上面有更多具有相同类名的表单呢？ - Jack1987

1

我想出了一个简单的解决方案，使用一个在我的网站上隐藏的简单表单，其中包含用户登录时使用的相同信息。例如：如果您希望用户在此表单上登录，可以在下面的表单中添加类似以下内容的代码。

<input type="checkbox" name="autologin" id="autologin" />

据我所知，我是第一个隐藏表单并通过点击链接提交表单的人。有一个链接提交了包含信息的隐藏表单。如果您不喜欢网站上的自动登录方法，并且密码存储在隐藏表单密码文本区域中，那么这并不是100％安全的...

好的，现在让我们来做这个工作。假设$siteid是账户，$sitepw是密码。

首先，在您的PHP脚本中创建表单。如果您不喜欢其中的HTML，则使用最少的数据，然后将值echo到隐藏表单中。我只是使用PHP值并在任何我想要的地方进行echo，通常是在表单按钮旁边，因为您看不到它。

要打印的PHP表单

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

PHP和提交表单的链接

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>

- AgeofTalisman

确实需要提交表单，但是链接在我的代码中不会出现，很抱歉。不过你可以用onclick或href=javascript：document.getElementById（'alt_forum_login'）.submit()的方式来提交。 - AgeofTalisman

问题是关于JavaScript的，根本不需要PHP代码。 - Shedokan

我必须强烈反对任何人使用这样的东西：将您的密码以明文形式发送到浏览器是一个巨大的安全漏洞。
这个回答与问题无关。

感谢您提供帮助！但请在安全话题上更加小心。许多人很容易从stackoverflow复制解决方案，而不完全理解它们。 - Alexander Thiel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Hare · Accepted Answer

188

将你的表单的name属性设置为"theForm"，你的代码就能正常工作了。

- Andrew Hare

23

有些人可能会觉得这很显而易见，但我有一个名为“submit”的按钮和id，并且document.theForm.submit()报错了。一旦我重新命名了我的按钮，代码就完美地工作了。 - Jonathan

1

@Jonathan，请问你的按钮叫什么名字？因为根据https://api.jquery.com/submit/，表单的子元素不应使用与表单属性冲突的输入名称或ID。 - keya