jQuery form serialize - просто возвращает пустую строку

Question

Я не получаю никаких данных из сериализации моей html-формы. Вот форма

<form method="post" action="#" name='basicForm' id='basicForm'> 

<input type="text" name="n_username" id="id_username" class="form-control uname" placeholder='Username' value='test_user' data-msg-required='The input field is required.' data-rule-required='true'/> 

<input type="password" name="n_password" id="id_password" class="form-control pword" placeholder='Password' value='xxxx' data-msg-required='The input field is required.' data-rule-required='true'/>     

<button class="btn btn-success btn-block">Sign In</button> </form> 

и вот JQuery

jQuery(document).ready(function(){ 
    $("#basicForm").validate({ 

     submitHandler: function (form) { 
      var request; 
      var $form = $(this); 

      var $inputs = $form.find("input, select, button, textarea"); 

      var serializedData = $form.serialize(); 
      alert (serializedData); <==empty 

      $inputs.prop("disabled", true); 

      request = $.ajax({ 
       url: "./ajax/login.php", 
       type: "post", 
       data: serializedData 
      }); 

      request.done(function (response, textStatus, jqXHR) { 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       alert(response); 
       //window.location.replace("success.php"); 
      }); 
     } 


    }); //validate 

});//ready 
</script> 

Данные в форме не сериализации. Я получаю пустое поле оповещения. Также на странице ajax i postback to i print_r массив $ _post и получите следующее: Array()

Я проверил элементы формы, имеющие имена, которые, как представляется, являются общей проблемой. Я использую эту версию jQuery

Валидация работает нормально. Это также работает

var x = $("#id_username").val(); 
var y = $("#id_password").val(); 
request = $.ajax({ 
       url: "./ajax/login.php", 
       type: "post", 
       //data: serializedData 
       data : { 
        username : x, 
        password: y 
        } 

заранее спасибо за любую помощь вы можете дать

Answer 1

вы нарушаете его здесь ...

submitHandler: function (form) { 
    ... 
    var $form = $(this); // <- '$(this)' is meaningless 
    ... 
    var serializedData = $form.serialize(); 
    ... 

Там нет $(this) в этом контексте, поэтому ваш $form является пустой.

Поскольку form аргумент, представляющий form объект уже была предоставлена ​​разработчиком, эта версия работает отлично ...

submitHandler: function (form) { 
    var serializedData = $(form).serialize(); 
    ... 

Работа DEMO: http://jsfiddle.net/gpaf8187/

Примечание: вы» Мне также понадобится type="submit" в вашем элементе <button>, или плагин проверки не заберет это событие.