javascript - jquery 确认在表中提交正确的表单

Question

您好，我有一个表格，其中列出了所有注册用户。我有两个选项“暂停/ react ”和“删除”。我想在提交这些按钮之前显示一条确认消息，以便警告用户如果处理此按钮会发生什么。所以我决定使用一个名为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

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

您需要提交您所在的表格。看起来插件传递了被单击的按钮:

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