一键提交多表单

Question

我知道这个问题已经被问了很多，但似乎没有适合我的答案。对不起，如果我真的很笨，但我已经卡了一天了..

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

$("#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 插件。

Answer 1

A 'submit' 根据定义是跳转到新的 URL。您知道一次只能对一种形式进行此操作。

但是，我们在这里谈论的是正常的 'submits'，您不必使用正常的提交来从表单中获取信息并对其进行操作。

由于您使用的是 JQuery，因此您可以使用它。查看 ajax 个调用。例如这里：

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

查找名为的示例：Post a form using ajax and put results in a div，您会发现有用的代码那里。它向您展示了如何获取表单中字段的值。

Answer 2

假设您有 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();
    });
});

然后为了防止表单满 post 返回只是防止提交事件的默认值，然后 post 使用 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

Answer 3

如果你想使用ajax 您可以使用 new FormData()

对所有输入和 post 的数据进行分组

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>

一键提交多表单

Submit multiple form with one button

javascript

php

forms

jquery

buttonclick