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

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

您可以将表单 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>

Answer 3

<!--
(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 4

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

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