Question

我的页面上有两个表单。

我只想提交一份表格。

但是当我使用提交按钮时，它会提交该页面中的所有表单。

如何使用JavaScript提交单个表单？

我的代码，

<form name="f1" method='post' action=''>
  <input type='submit' value='submit'>
</form>

<form name="f2" method='post' action=''>
  <input type='text' name='text2'>
  <input type='button' value='submit'>
</form>

Answer 1

将输入类型提交更改为按钮，并为每个按钮创建一个单击事件以提交相应的表单，

<input type="button" onClick="submit_form1()" value="submit form1">

<script type="text/javascript">
function submit_form1()
{   alert("submit me");
f1.submit();
}
</script>

Answer 2

<!--
(1) Property 'name' has no meaning in 'form' tag
(2) Set the desired URL in 'action'
(3) Set ID for the forms to call from JS
(4) Use JavaScript to call the '.submit()' method
-->

<form method="POST" action='your-page-url' id="form1">
  <input type='submit' value='submit'/>
</form>

<form method="POST" action='your-page-url' id="form2">
  <input type='text' name='text2'/>
  <input type='button' value='submit'/>
</form>

<button onclick="submit_form('form1');">Submit form 1</button>
<button onclick="submit_form('form2');">Submit form 2</button>

<script>
function submit_form(Form_Id) {
  var Form = document.getElementById(Form_Id);
  Form.submit();
}
</script>

Answer 3

document.forms['f1'].submit();第一个表单将被提交，但是当您按下提交时，您不需要提交js，只提交与该提交按钮对应的表单。如果您打印帖子值，这将是明确的在服务器端。在你的第二个表单中你需要一个提交按钮而不是一个简单的按钮。提交按钮有一个默认的自动提交表单的属性，作为一个类型按钮，我们需要指定动作。

<input type='submit' value='submit'>

Answer 4

您可以将表单ID发送到Javascript“提交者”功能并使用它来提交：

<form name="f1" id="f1" method='post' action=''>
  <a href="javascript: submitform("f1")">submit</a>
</form>

<form name="f2" id="f2" method='post' action=''>
  <input type='text' name='text2'>
  <a href="javascript: submitform("f2")">submit</a>
</form>


<script type="text/javascript">
function submitform(frmId)
{
  myFrm = document.getElementById(frmId);
  myFrm.submit();
}
</script>

如何在页面中提交单个表单？

4 个答案: