一键提交多个表单 - Submit multiple form with one button

我知道这个问题被问了很多，但似乎没有答案。如果我真的很笨，我很抱歉，但我已经被困了一天了。。

我想选择一个表行（见下文），然后删除该用户。由于我想要多个表单来与表交互，所以我不能将它们放在一个表单中。

$("#clickMe").click(function () {
    $(".myForms").trigger('submit');
});
	
$('.myForms').submit(function () {
    console.log("SWAGGG");
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="listForm" action="index.php?p=admin" method="POST">
  <?php
$userQuery = "SELECT * FROM usr2";
$row_userQuery = $dbportal->query($userQuery);
if(isset($row_userQuery) && !empty($row_userQuery))
{
    //row[0] = ID
    //row[1] = username(abbrevation)
    //row[2] = admin? 0=normale user 1=admin
    echo'
        <table id="myTable" class="table table-striped">
            <tr><td></td><td>User ID</td><td>username</td><td>Role</td></tr>';
    foreach ($row_userQuery as $row)
    {
        echo'
        <tr> 
            <td id="tdSelect"> <input type="checkbox" name="selectedUser[]" value="'. $row[0] .'" />
            <td>'. $row[0] .'</td>
            <td>'. $row[1] .'</td>
            <td>'. $row[2] .'</td>
        </tr>';
    }
    echo'</table>';
}
?>
    <input type="hidden" name="action" value="listForm">
</form>
<form id="deleteForm" class="myForms" action="index.php?p=admin" method="POST">
    <div class="leftTextBox">
	    <p>user ID:</p>
		<p class="margin">gebruikersnaam:</p>
	</div>
	<div class="rightTextBox">
		<input class="form-control" type="text" name="userID" placeholder="user ID">
		<input class="form-control" type="text" name="login" placeholder="gebruikersnaam" style="margin-top: 8px;">
	</div>
    <input type="hidden" name="action" value="deleteForm">
 </form>
 <button id="clickMe" class="btn btn-default" style="margin-top:5px;float:right;">Delete user</button>

我确信只有我在监督一些事情，但我们会非常感谢您的帮助。此外，我安装了ajaxForm插件。

根据定义，"提交"是跳转到新URL。您知道，一次只能对一个表单执行此操作。

然而，我们在这里谈论的是正常的"提交"，您不必使用正常的提交来从表单中获取信息并采取行动

既然您使用的是JQuery，那么您可以使用它。看看ajax调用。例如：

http://api.jquery.com/jquery.post

查找名为：使用ajax发布表单并将结果放入div的示例，您将在其中找到有用的代码。它向您展示了如何获取表单中字段的值。

让我们假设您有3个这样的表单：

<form id="form1" action="api/url1">
    <input name="field1" type="text" />
</form>
<form id="form2" action="api/url2">
    <input name="field2" type="text" />
</form>
<form id="form3" action="api/url3">
    <input name="field3" type="text" />
</form>
<button>Submit</button>

然后你可以像这样触发每个表单的提交：

$('button').on("click", function () {
    $('form').each(function (index, form) {
        $(form).submit();
    });
});

然后，为了防止表单完全返回，只需防止提交事件的默认值，然后使用ajax发布序列化表单：

$('form').on("submit", function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function (data) {
            alert(data);
        },
        error: function (error) {
            console.error({ status: error.status, statusText: error.statusText })
        }
    });
});

JSFIDDLE

如果您想使用ajax您可以使用new FormData() 对所有输入和发布的数据进行分组

function fnSubmintAll(){
   var formData = new FormData();
    $("#form1,#form2,#form3").each(function(idx,item){
        var frmValue = $(item).serializeArray();
        $.each(frmValue, function (key, input) {
            formData.append(input.name,input.value);
        });
    })
    $.ajax({
        url: "/PostUrl",
        type: "POST",
        data: formData,
        contentType:false,
        processData: false, 
        success: function (result) { 
           alert("Success")
        },
        error: function () {
          alert("Error")
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset> 
<legend>From 1</legend>
<form id="form1">
    <input name="field1" type="text" />
</form>
</fieldset>    
<fieldset> 
<legend>From 2</legend>
<form id="form2">
    <input name="field2" type="text" />
</form>
</fieldset>   
<fieldset> 
<legend>From 3</legend>
<form id="form3">
    <input name="field3" type="text" />
</form>
</fieldset>   
<br />
<br />
<br />
<button type="button" onclick="fnSubmintAll">Submit All</button>