如何使用 JavaScript 提交表单？

Posted 2023-05-07

技术标签:

【中文标题】如何使用 JavaScript 提交表单？【英文标题】：How can I submit a form using JavaScript? 【发布时间】：2012-04-08 23:37:33 【问题描述】：

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

<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()被调用。该函数将上述 div 的 innerhtml 更改为“正在处理...”（因此提交按钮现在消失了）。

上面的代码有效，但现在的问题是我无法提交表单！我试过把它放在placeOrder() 函数中：

document.theForm.submit();

但这不起作用。

如何让表单提交？

【问题讨论】：

我认为你的页面上有一个<form> 标签。我在代码中没有看到任何什么意思：该函数将上述div的innerHTML更改为“处理...”（因此提交按钮现在消失了）。你介意分享一下这个逻辑吗？顺便说一句，如果您有一个提交按钮（在 name=submit 的下方），theform.submit() 函数将不起作用。请通过在代码中添加 ...如果您有一个提交按钮（在 name=submit 下方）...这解决了我的问题！它是 document.theForm.submit(); 不起作用，您宁愿需要使用document.getElementById("theForm").submit(); 并在HTML 中指定表单id，例如：<form id="theForm">(content)</form> 【参考方案1】：

将表单的name 属性设置为"theForm"，您的代码就可以工作了。

【讨论】：

这对某些人来说可能看起来非常明显，但我有一个名称和 ID 为“提交”的按钮，document.theForm.submit() 报告了一个错误。一旦我重命名了我的按钮，代码就可以完美运行。 @Jonathan 你的按钮叫什么名字？因为，根据api.jquery.com/submit，表单的子元素不应使用与表单属性冲突的输入名称或 ID。【参考方案2】：

你可以使用...

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

【讨论】：

你如何告诉它把表格发送到哪里？例如，就我而言，我希望通过电子邮件将内容发送给我 @Imray 您可能希望服务器端代码为您执行此操作。 @CodyBugstein 设置您尝试发布的表单的action="/controller/action-method" method="post" 属性。因为我的表单名称是 printoffersForm 以及 id 相同。 document.getElementById('printoffersForm').submit(); 但我给我错误提交不是函数 @MadhuriPatel 你的提交按钮是否也命名为提交？见答案***.com/questions/833032/…【参考方案3】：

它在我的情况下完美运行。

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

另外，您可以在如下函数中使用它：

function formSubmit()

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

【讨论】：

这会提交来自input 标签的表单值吗？ @roy 是的，它会从输入标签提交表单值。 @ChintanThummar 然后您可以使用 document.getElementById("form1").onsubmit = function() 处理Form submit //您可以在此处使用 Ajax 代码提交表单 // 无需刷新页面我没有尝试过，但它看起来比我提供的要糟糕。谢谢;)【参考方案4】：

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

或

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

你可以尝试任何一个...这肯定会工作...

【讨论】：

【参考方案5】：

我将不使用表单中的name 标记而放弃提交表单的方式：

HTML

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

javascript

function placeOrder(form)
    form.submit();

【讨论】：

【参考方案6】：

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

【讨论】：

这个答案可能对某些***.com/a/54619085/7003760有帮助【参考方案7】：

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

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

【讨论】：

【参考方案8】：

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

【讨论】：

请在您的回答中添加一些解释。这不会提高已经给出的答案的质量。这是在表单定义的实际 html 中显示表单名称的唯一答案。此外，它简单明了。【参考方案9】：

如果你的表单没有id，但是有像theForm这样的类名，可以使用下面的语句来提交：

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

【讨论】：

上面同名的表单多了怎么办？【参考方案10】：

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

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

据我所知，我是第一个隐藏表单并通过单击链接提交的人。有提交带有信息的隐藏表单的链接。如果您不喜欢网站上的自动登录方法，并且密码位于隐藏的表单密码文本区域，这不是 100% 安全的...

好的，这就是工作。假设$siteid 是帐户，$sitepw 是密码。

首先在您的 PHP 脚本中制作表单。如果您不喜欢其中的 HTML，请使用最少的数据，然后以隐藏形式在值中使用 echo。我只是在表单按钮旁边我想要的任何地方使用 PHP 值并回显，因为你看不到它。

要打印的 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>

【讨论】：

没错，你需要提交表单，但链接不会出现在我的编码中，抱歉，请点击或 href=javascript：document.getElementById('alt_forum_login').submit() 问题是关于javascript的，根本不需要php代码 1.我必须强烈劝阻任何人不要使用这样的东西：将密码以明文形式发送到浏览器是一个巨大的安全漏洞。 2. 此回复与问题无关感谢您提供帮助的努力！但请在安全主题方面更加小心。许多人在没有完全理解的情况下从 *** 复制解决方案是很诱人的。

以上是关于如何使用 JavaScript 提交表单？的主要内容，如果未能解决你的问题，请参考以下文章

javascript 如何使用jQuery创建和提交表单？

使用 JavaScript 提交表单时，如何从用户那里获取数量变量？

使用 javascript 的动态表单提交 - 如何优雅的代码？

在不使用 JavaScript 的情况下，如何在选择字段集中时使 Enter 键提交表单？

如何使用没有 jQuery 但纯 Javascript 的 AJAX 提交此表单

如何在 Golang 中使用 javascript 获取特定的网站元素或提交表单