提问人：Nate 提问时间：3/25/2012 最后编辑：Peter MortensenNate 更新时间：8/27/2023 访问量：1003482
如何使用 JavaScript 提交表单？
How can I submit a form using JavaScript?
问：
我有一个带有 id 的表单，其中包含以下带有提交按钮的 div：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>
单击时，将调用该函数。该函数将上述 div 的 innerHTML 更改为 “processing ...”（所以提交按钮现在不见了）。placeOrder()
上面的代码有效，但现在的问题是我无法提交表单！我试过把它放在函数中：placeOrder()
document.theForm.submit();
但这行不通。
我怎样才能提交表格？
答：
179赞
alex
3/25/2012
#1
您可以使用...
document.getElementById('theForm').submit();
...但不要将 .您可以隐藏表单，然后插入处理... 它将出现在它的位置。innerHTMLspan
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
评论
0赞
CodyBugstein
7/18/2014
你如何告诉它把表格发送到哪里？例如，就我而言，我希望将内容通过电子邮件发送给我
0赞
alex
7/21/2014
@Imray 您可能希望服务器端代码为您执行此操作。
0赞
phougatv
2/27/2017
@CodyBugstein设置您尝试发布的表单的属性。action="/{controller}/{action-method}" method="post"
4赞
Madhuri Patel
11/19/2018
因为我的表单名称是 printoffersForm 和 id 是相同的。 但是我给我错误提交不是一个函数document.getElementById('printoffersForm').submit();
1赞
rbassett
11/28/2018
@MadhuriPatel 您可以将提交按钮也命名为提交吗？查看答案 stackoverflow.com/questions/833032/...
188赞
Andrew Hare
3/25/2012
#2
将窗体的属性设置为，代码将起作用。name"theForm"
评论
23赞
Jonathan
10/9/2017
这对某些人来说似乎非常明显，但我有一个名称和 ID 为“submit”的按钮，并报告了一个错误。一旦我重命名了我的按钮，代码就完美地工作了。document.theForm.submit()
1赞
keya
9/13/2018
@Jonathan 你拥有的按钮叫什么名字？因为根据表单的子元素 api.jquery.com/submit 不应使用与表单属性冲突的输入名称或 ID。
56赞
Chintan Thummar
3/29/2013
#3
在我的情况下，它运行良好。
document.getElementById("form1").submit();
此外，您可以在以下函数中使用它：
function formSubmit()
{
document.getElementById("form1").submit();
}
评论
0赞
simanacci
6/3/2016
这会提交来自标签的表单值吗？input
0赞
Chintan Thummar
6/7/2016
@roy 是的，它将提交来自输入标记的表单值。
2赞
Shubham Kumar
6/28/2016
@ChintanThummar然后你可以使用 document.getElementById（“form1”）.onsubmit = function（）{ 处理表单提交 //你可以在这里使用 Ajax 代码提交表单 // 无需刷新页面 }
0赞
Chintan Thummar
6/28/2016
我没有尝试过，但它看起来比我提供的要糟糕。谢谢;)
26赞
Aruna
5/28/2014
#4
document.forms["name of your form"].submit();
或
document.getElementById("form id").submit();
你可以试试这些......这肯定会起作用......
评论
0赞
zsalya
7/30/2022
为了让第一个工作，我不得不将其更改为document.forms.namedItem（“FormName”）.submit（）;
4赞
Bimal Jha
1/8/2015
#5
如果您的表单没有任何 ID，但它具有类似 theForm 的类名，则可以使用以下语句提交它：
document.getElementsByClassName("theForm")[0].submit();
评论
0赞
Jack1987
9/30/2016
如果上面有更多具有相同类名的表单呢？
1赞
AgeofTalisman
2/3/2016
#6
我提出了一个简单的解决方案，使用隐藏在我的网站上的简单表格，其中包含用户登录时使用的信息。示例：如果您希望用户在此表单上登录，则可以在下面的表单中添加类似以下内容的内容。
<input type="checkbox" name="autologin" id="autologin" />
据我所知，我是第一个隐藏表单并通过单击链接提交表单的人。有一个链接，提交一个包含信息的隐藏表格。如果您不喜欢网站上的自动登录方法，则不是 100% 安全的，密码位于隐藏的表单密码文本区域上......
好的，这就是工作。假设是帐户和密码。$siteid$sitepw
首先在PHP脚本中制作表单。如果您不喜欢其中的 HTML，请使用最少的数据，然后以隐藏的形式使用值。我只是使用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>
评论
0赞
AgeofTalisman
2/3/2016
没错，您需要提交表单，但链接不会出现在我的编码中对不起，但请进行 onclick 或 href=javascript： document.getElementById（'alt_forum_login'）.submit（）
0赞
Shedokan
7/7/2016
问题是关于javascript的，根本不需要php代码
0赞
Alexander Thiel
12/14/2020
1. 我必须强烈劝阻任何人不要使用这样的东西：以明文形式将您的密码发送到浏览器是一个巨大的安全漏洞。2. 此回答与以下问题无关：感谢您提供帮助的努力！但是，请在安全主题上更加小心。对于许多人来说，在不完全理解它们的情况下从 stackoverflow 复制解决方案是很诱人的。
6赞
Chandan Gupta
8/5/2016
#7
[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()
}
评论
5赞
Sampada
8/5/2016
请在您的答案中添加一些解释。
0赞
Randy
8/5/2016
这不会提高已经给出的答案的质量。
0赞
Tim Bird
7/10/2020
这是在表单定义的实际 html 中显示表单名称的唯一答案。此外，它简单明了。
14赞
SkyClasher
4/18/2017
#8
我将保留提交表单的方式，而不使用表单内的标签：name
[HTML全文]
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript的
function placeOrder(form){
form.submit();
}
14赞
Abhijeet Navgire
1/30/2018
#9
您可以使用以下代码通过 JavaScript 提交表单：
document.getElementById('FormID').submit();
14赞
Jay Nagar
3/29/2018
#10
<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>
评论
1赞
Mayer Spitz
2/11/2019
这个答案可能对某些 stackoverflow.com/a/54619085/7003760 有所帮助
-1赞
jtubre
3/3/2023
#11
如果您在这里寻找使用表单外部按钮提交表单的最佳方式：
从 HTML5 开始，只需使用按钮的属性。form
<button type="submit" form="my_form_id">Submit</button>
此方法可以在 JS 内联 onClicks 无法处理的独特上下文（例如：Stripe 基于 iframe 的 PaymentElement）中提交表单。
0赞
Mitesh vaghela
8/27/2023
#12
let form = document.getElementById('theForm');
let div = document.getElementById('placeOrder');
let span = document.createElement('span');
form.addEventListener('submit', function(e){
e.preventDefault();
div.style.display = 'none';
span.innerText = 'processing...';
form.appendChild(span);
console.log('form is submitted.');
})
这就是你应该如何处理这个问题 这个答案是针对面临此类问题的新开发人员的。
评论
<form>document.theForm.submit();不起作用，您宁愿在 HTML 中使用和指定表单 ID，例如：document.getElementById("theForm").submit();<form id="theForm">(content)</form>