Bootstrap modal ajax form submit возвращает пустые $ _POST

Question

Я хотел бы представить свою модальную форму с помощью ajax. Сначала я заполняю форму некоторыми предопределенными данными. Эта часть работает. Однако, когда я нажимаю кнопку отправки, я получаю удар по моему скрипту form.php, но в скрипте $ _POST пуст. Что я здесь делаю неправильно?

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="exampleModalLabel">Edit MAC alias</h4> 
      </div> 
      <div class="modal-body"> 
       <form class="macalias" name="macalias" id="macalias"> 
        <input type="hidden" class="form-control" id="valmac" name="valmac"> 
        <div class="form-group"> 
         <label for="message-text" class="control-label">Alias:</label> 
         <input type="text" class="form-control" id="valalias" name="valalias"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="submit" class="btn btn-default" data-dismiss="modal">Save</button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 


<script> 
    $(function() 
    { 
    // fill the form with data (this part works) 
    $('#exampleModal').on 
    ('show.bs.modal', function (event) 
     { 
      var button = $(event.relatedTarget) 
      var valmac = button.data('valmac') 
      var valalias = button.data('valalias') 
      var modal = $(this) 
      modal.find('.modal-title').text('Edit alias for ' + valmac) 
      modal.find('.modal-body input[id=valmac]').val(valmac) 
      modal.find('.modal-body input[id=valalias]').val(valalias) 
     } 
    ) 

    $(".macalias").submit(function(event) { 
     //cancel the default submit action by calling 
     event.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "form.php", 
      data: $('form#macalias').serialize(), 
      success: function(msg){ 
       $('#exampleModal').modal('hide') 
      }, 
      error: function(){ 
       alert("failure"); 
      } 
     }); 
    }); 
}); 
</script> 

Отредактировано: код теперь работает

Answer 1

ваша форма имеет класс с именем macalias поэтому он должен быть

data: $('form.macalias').serialize() 

EDIT!

Вы можете прослушать нажатие клавиши (Enter), но я думаю, что лучше прикрепить обработчик событий для отправки формы. Заменить

$("input#submit").click(function(){...}); 

с

$(".macalias").submit(function(event) { 
    //cancel the default submit action by calling 
    event.preventDefault(); 

    //Your ajax stuff 
}); 

и изменить на кнопку отправки

<button type="submit" class="btn btn-default" data-dismiss="modal" >Close</button>