Модальное удаление (и подтверждение) + кнопка редактирования с несколькими полями

Question

Я хочу удалить модальное всплывающее окно (модальное всплывающее меню - не в js скрипке). Дело в том, что я получаю каждый раз от getUserDelID пользователь attr, равный 1 без метра, на которую нажимаю кнопку.

$('#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 идентификатор может использоваться только для одного элемента. Если вы хотите иметь несколько элементов с одним и тем же именем, вы должны использовать классы.

С точки зрения того, что вы пытаетесь достичь, вы не хотите, чтобы модальные функции открывались автоматически, вы хотите, чтобы ваш скрипт открывал модальный режим после нажатия кнопки, поэтому в обработчике кликов для кнопок вы можете получить идентификатор пользователя из данные события.

Я обновил свою скрипку принять во внимание: http://jsfiddle.net/r3b3X/1/

Я обновил свой HTML, чтобы использовать классы вместо идентификаторов:

<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") 
     } 
    }); 
});