使用一個按鈕提交多個表單

Question

我知道這個問題已被問到很多，但似乎沒有答案給我。 我很抱歉，如果我真的很蠢，但我已經被困了一天了..

我想選擇一個表行（見下文），然后刪除該用戶。 由於我希望有多個表單與表進行交互，因此我無法將它們放在一個表單中。

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

根據定義，'submit'是跳轉到新URL。 您知道一次只能對一個表單執行此操作。

但是，我們在這里談論正常的“提交”，並且您不必使用常規提交來從表單獲取信息並對其進行操作。

由於您使用的是JQuery，因此您可以使用它。 看看ajax調用。 比如這里：

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

查找名為的示例： 使用ajax發布表單並將結果放入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();
    });
});

然后，為了防止表單完整回發，只需阻止提交事件的默認值，然后使用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