如何使用javascript提交表单？

190

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

<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更改为“ processing ...”（因此，提交按钮现在消失了）。

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

document.theForm.submit();

但这是行不通的。

我该如何提交表格？

javascript

— 内特
source

3

我认为您<form>在页面的某个位置有一个标签。

— Justin808'3-3-24

我在代码中看不到任何<form>。

— dotoree 2012年

1

您的意思是什么：该函数将上述div的innerHTML更改为“ processing ...”（因此，提交按钮现在消失了）。并且您是否愿意分享这种逻辑。顺便说一句，如果您有一个提交按钮（在name = submit下方），theform.submit（）函数将不起作用。请通过在代码中添加<form>标记来澄清您的问题。您可能会使用jsfiddle.net

— sakhunzai 2012年

5

...如果您有一个提交按钮（在某处向下，带有name = submit）...这解决了我的问题！它是<input type =“ button” name =“ submit” ...，但仍阻止javascript发送表单。

— Nikolay Ivanov 2014年

136

将name表单的属性设置为"theForm"，代码即可正常工作。

— 安德鲁·黑尔
source

14

这对某些人来说似乎很明显，但是我有一个名称和ID为“ submit”的按钮，并document.theForm.submit()报告了一个错误。重命名按钮后，代码即可正常工作。

— 乔纳森

1

@Jonathan您拥有的按钮叫什么名字？根据api.jquery.com/submit表单的子元素，Coz 不应使用与表单属性冲突的输入名称或ID。

— keya

106

您可以使用...

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

— 亚历克斯
source

您如何告诉它将表单发送到哪里？例如，就我而言，我希望将内容通过电子邮件发送给我

— CodyBugstein 2014年

@Imray您可能希望服务器端代码为您执行此操作。

— alex 2014年

@CodyBugstein设置action="/{controller}/{action-method}" method="post"您要发布的表单的属性。

— barnes

2

因为我的表单名称是printoffersForm以及ID相同。document.getElementById('printoffersForm').submit();但我给我错误提交不是函数

— Madhuri Patel

@MadhuriPatel可以将提交按钮也命名为Submit吗？参见答案stackoverflow.com/questions/833032/…–

— rbassett

37

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

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

另外，您可以在功能中使用它，如下所示：

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

— 金丹·图马尔
source

这将从input标签提交表单值吗？

— simanacci

@roy是的，它将从输入标签提交表单值。

— Chintan Thummar '16

2

@ChintanThummar，然后您可以使用document.getElementById（“ form1”）。onsubmit = function（）{// 来处理表单提交。//您可以在此处使用Ajax代码提交表单// //无需刷新页面}

— Shubham Kumar

我没有尝试过，但看起来比我提供的还要连击。谢谢;）

— Chintan Thummar

12

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

要么

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

您可以尝试任何一种方法。

— 阿鲁那
source

5

这是一则旧文章，但我将保留不使用name表单内标签的方式提交表单的方式：

的HTML

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

JS

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

希望此解决方案可以帮助其他人。TQ

— SkyClasher
source

3

的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）
source

4

请在回答中添加一些解释。

— 桑帕达

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

— 兰迪

2

如果您的表单没有任何ID，但具有类似于Form的类名，则可以使用以下语句提交它：

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

— 比马尔·贾（Bimal Jha）
source

那上面还有更多具有相同类名的表格呢？

— Jack1987年

0

我想出了一个简单的解决方法，即使用隐藏在我网站上的简单表格提供与用户登录时使用的相同信息。示例如果希望用户使用此表单登录，则可以将以下内容添加到下面的表单中。

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

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

好的，这是工作。可以说$siteid是帐户，$sitepw是密码。

如果您不喜欢html，请首先在php脚本中使用该表单，以使用最少的数据，然后以隐藏的形式回显该值。我只使用一个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>

— 护身符时代
source

是的，您需要提交表单，但是该链接不会出现在我的代码中，但是对不起，请您进行onclick或href = javascript：document.getElementById（'alt_forum_login'）。submit（）

— AgeofTalisman

问题是关于javascript的，根本不需要php代码

— Shedokan

0

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

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

— 阿披耶·纳维吉尔（Abhijeet Navgire）
source

-1

<html>
<body>

<p>Enter some text in the fields below, 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）
source

下次您能否分享一个仅包含相关部分和一些解释的正确答案？

— Nico Haase

这个答案可能是一些有用的stackoverflow.com/a/54619085/7003760

— 迈耶斯皮策