jquery確認在表中提交正確的表格

Question

嗨，我有表列出所有註冊用戶。我有兩個選項掛起/反應和刪除。我希望在提交這些按鈕之前顯示一條確認消息，以便在處理這些按鈕時警告用戶會發生什麼情況。所以我決定使用一個叫做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(); 
}, 

Answer 2

任何幫助，您可以嘗試：

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

這需要第一父與從標籤它可以找到。由於您的所有暫停用戶按鈕都在提交表單內，因此應該可以使用。

當你寫

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

應該如何知道你的意思，其中暫停用戶類。所以它需要最後它可以找到。並採取最接近的形式提交。

Answer 3

您還可以使用jQuery插件確認的方法後： -

$(".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();