Question

我搜索并从这里找到了很好的代码。 Submit a form using jQuery

    <input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language ="javascript" type = "text/javascript" >
    function submitDetailsForm()
    {
       $("#formId").submit();
    }
</script>

但是，您能否建议如何处理页面中的多个表单？

<form id="myForm1" action="comment.php" method="post"></form>
<form id="myForm2" action="comment.php" method="post"></form>
<form id="myForm3" action="comment.php" method="post"></form>
<form id="myForm4" action="comment.php" method="post"></form>

Answer 1

我建议在你想要提交的每个输入按钮上放一个课程。

例如，你可以有这样的形式：

<form id="form1">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>
<form id="form2">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>

然后你可以使用jQuery这样提交它们：

$(".submitButton").click(function() {

  //Select the parent form and submit
  $(this).parent("form").submit();

});

Answer 2

没有Ajax就没有办法实现这一目标。当您提交表单时，您实际上正在发出http请求，因此将加载一个全新的html页面。

避免这种情况的唯一方法是通过Ajax发送表单，这样你就可以控制请愿的响应（因此没有什么能阻止你通过这种方式发送多个表单）。

您可以使用this jQuery plugin

实现此目的

Answer 3

<button type="button" onclick="myFunction()">create another button</button>

<p id="demo1"></p>

/* get all form and loop foreach */
$( "form" ).each( function () {

    /* addEventListener onsubmit each form */
    $( this ).bind( "submit", function (event) {

        /* return false */
        event.preventDefault();

        /* display each props of forms */
        console.log( event.target ); // object formHTML
        console.log( "form id: " + event.target.id );
        console.log( "form action: " + event.target.action );
        console.log( "form method: " + event.target.method );

    } );

});

Codepen

Repl (DEMO)

Jquery在页面中提交多个表单

3 个答案: