jquery 确认在 table 中提交正确的表格

Question

您好，我有 table，其中列出了所有注册用户。我有两个选项 Suspend/Reactive 和 Delete。我想在提交这些按钮之前显示一条确认消息，以便警告用户如果处理这些按钮将会发生什么。所以我决定使用一个名为 jquery.confirm 的插件，它的效果非常好。我从文档中获取了这个功能设置：

// SUSPEND USER
$(".suspend-user").confirm({

    text: "Are you sure you want to suspend this user? Login access for this user will be removed.",
    title: "Confirmation required",
    confirm: function(button) {
         $('.suspend-user').closest('form').submit();
    },
    cancel: function(button) {
        // nothing to do
    },
    confirmButton: "Yes I'm sure.",
    cancelButton: "No.",
    post: true,
    confirmButtonClass: "btn-danger",
    cancelButtonClass: "btn-green"
});

因此，一旦用户确认了这一点，他们就会找到最接近的表格并提交。然而，它提交页面上的最后一个表单而不是最近的表单，或者按钮实际链接的表单。这是使用以下代码实现的：

confirm: function(button) {
         $('.suspend-user').closest('form').submit();
    },

有什么方法可以定位正确的表单吗？我的HTML如下或者查看一个JSFiddle:

非常感谢任何帮助

<table id="userTable" class="table">
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>User Name</th>
        <th>Email</th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>user</td>
        <td>user</td>
        <td>useruser</td>
        <td>useruser@gmail.com</td>
        <td> <a href="http://myapp.local/admin/user/1/edit"><span class="icon-edit"></span>Edit</a>

        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/1/delete" accept-charset="UTF-8">
                <input name="_method" type="hidden" value="PATCH">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger suspend-user"><span class="icon-remove-user"></span>Suspend</button>
            </form>
        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/1/removeUser" accept-charset="UTF-8" class="delete-user-profile" id="delete-userform">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger delete-user dialog-confirm"><span class="icon-trash"></span>Delete</button>
            </form>
        </td>
    </tr>
    <tr>
        <td>P</td>
        <td>b</td>
        <td>user</td>
        <td>useruser+1@gmail.com</td>
        <td></td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/2/restore" accept-charset="UTF-8">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-green restore-user"><span class="icon-add-user"></span> Re-activate</button>
            </form>
        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/2/removeUser" accept-charset="UTF-8" class="delete-user-profile" id="delete-userform">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger delete-user dialog-confirm"><span class="icon-trash"></span>Delete</button>
            </form>
        </td>
    </tr>
    <tr>
        <td>wegrerhb</td>
        <td>bkhbjhb</td>
        <td>bkjbk</td>
        <td>nrbj@gmail.com</td>
        <td></td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/28/restore" accept-charset="UTF-8">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-green restore-user"><span class="icon-add-user"></span> Re-activate</button>
            </form>
        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/28/removeUser" accept-charset="UTF-8" class="delete-user-profile" id="delete-userform">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger delete-user dialog-confirm"><span class="icon-trash"></span>Delete</button>
            </form>
        </td>
    </tr>
    <tr>
        <td>erhreth</td>
        <td>rher</td>
        <td>erheh</td>
        <td>grlnho@gmail.com</td>
        <td> <a href="http://myapp.local/admin/user/29/edit"><span class="icon-edit"></span>Edit</a>

        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/29/delete" accept-charset="UTF-8">
                <input name="_method" type="hidden" value="PATCH">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger suspend-user"><span class="icon-remove-user"></span>Suspend</button>
            </form>
        </td>
        <td>
            <form method="POST" action="http://myapp.local/admin/user/29/removeUser" accept-charset="UTF-8" class="delete-user-profile" id="delete-userform">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="cHO3sLY9zjBUfI1J60AShfOeThxQbOVFbDyhpuQo">
                <button type="submit" class="btn btn-danger delete-user dialog-confirm"><span class="icon-trash"></span>Delete</button>
            </form>
        </td>
    </tr>
</tbody>

Answer 1

你可以试试：

$(button).parents('form:first').submit();

这需要第一个带有它可以找到的 from 标签的父级。由于您所有的暂停用户按钮都在表单内以提交它应该可以工作。

当你写

$('.suspend-user').closest('form').submit();

它怎么知道你指的是哪个挂起用户类。所以它需要它能找到的最后一个。并采用最接近的形式提交。

Answer 2

$('.suspend-user') 正在查找所有表格并全部提交。

您需要提交您所在的表格。看起来插件传递了被点击的按钮，所以：

confirm: function(button) {
     $(button).closest('form').submit();
},

Answer 3

也可以使用jQuery确认插件post方法：-

$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        delete();
    },
    cancel: function(button) {
        // nothing to do
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: true,
    confirmButtonClass: "btn-danger",
    cancelButtonClass: "btn-default"
});

您还可以在 http://myclabs.github.io/jquery.confirm/

查看文档

如果您不想使用它，您也可以使用 jQuery 代码提交：-

jQuery(this).parent('form:first').submit();

jquery 确认在 table 中提交正确的表格

jquery on confirm submit correct form in the table

html

javascript

forms

jquery

submit