模態刪除（和確認）+編輯按鈕與多個字段

Question

我想要刪除模態彈出（模式彈出式工程 - 不在js小提琴）。事情是我每次getUserDelID的attr用戶等於1沒有metter我按哪個按鈕。

$('#deleteUser').on('click', function (event) { 
    var otherProp = $('#getUserDelID').attr("user"); 
    alert(otherProp); 
    $.ajax({ 
     type: "POST", 
     url: "deleteuser.php", 
     how to pass: ? delete = otherProp 
     data : $('form.deleteuser').serialize(), 
     beforeSend: function() { 
      //do your validation 
     }, 
     success: function (msg) { 
      $("#deleteholder").html(msg) 

     }, 
     error: function() { 
      $("#deleteholder").html("error") 
     } 
    }); 
}); 

的jsfiddle與模態窗口的外觀：http://jsfiddle.net/r3b3X/

deleteuser.php使所有的其他工作一樣顯示錯誤的。

HJ05還製造一個編輯選項：http://jsfiddle.net/r3b3X/3/

感謝您的幫助。

Answer 1

根據HTML規範，一個ID只能在一個元素上使用。如果你想有多個具有相同「名稱」的元素，你可以使用類。

就你試圖達到的目的而言，你不希望模態自動打開，你希望你的腳本在點擊按鈕後打開模態，所以在點擊處理器中你可以從中獲得用戶ID事件數據。

我更新你的小提琴考慮到這一點：http://jsfiddle.net/r3b3X/1/

我已經更新了你的HTML中使用類，而不是IDS：

<button data-user="1" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button> 
<button data-user="2" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button> 
<button data-user="3" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button> 
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete User" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title"><i class="fa fa-user"></i> UserDeleting</h3> 
       </div> 
      </div> 
      <div class="modal-body"> 
       <div id="deleteholder"></div> 
       <div id="msg-loader"></div> 
       <form class="deleteuser"> 
        <div class="input-group"> <span class="input-group-addon">you sure u want delete id <span class="userId"></span></span> 
         <input type="text" name="username" class="form-control" placeholder="Username" required /> 
        </div> 
        <br /> 
       </form> 
       <div style="padding: 10px 15px;background-color: #f5f5f5;border-top: 1px solid #dddddd;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;"> 
        <button id="deleteUser" class="btn btn-primary">Delete</button> 
        <button class="btn btn-success" href="#" id="close" class="btn" data-dismiss="modal">Close</a> 
       </div> 
      </div> 
      <!-- /.modal-content --> 
     </div> 
     <!-- /.modal-dialog --> 
    </div> 
</div> 

和JavaScript來：

$('.getUserDelID').on('click', function (event) { 
    $('.userId').text($(this).data('user')); 
    $('#deleteModal').modal(); 
}); 

$('#deleteUser').on('click', function (event) { 
    var otherProp = $('.userId').text(); 
    alert(otherProp); 
    $.ajax({ 
     type: "POST", 
     url: "deleteuser.php", 
     data: $('form.deleteuser').serialize(), 
     success: function (msg) { 
      $("#deleteholder").html(msg) 
     }, 
     error: function() { 
      $("#deleteholder").html("error") 
     } 
    }); 
});