Jquery serialize（）が空です

Question

私はAJAX経由でPHPスクリプトにデータを送信する連絡フォームを持っています。かなり基本的ですが、私はserializeで入力値を取得できません。フォームIDは正しいですが、私は入力値を取得しますが、値は取得しません。ここに私のコードです。ありがとう！

\t //Contact form AJAX 
 
    var form = $('#contact-form'); 
 
    var formMessages = $('#form-messages'); 
 
    // Serialize the form data. 
 
\t var formData = $(form).serialize(); 
 
\t console.log($(form).serialize()); 
 
    // Set up an event listener for the contact form. 
 
\t $(form).submit(function(event) { 
 
\t  // Stop the browser from submitting the form. 
 
\t  event.preventDefault(); 
 
\t \t // Submit the form using AJAX. 
 
\t \t $.ajax({ 
 
\t \t \t type: 'POST', 
 
\t \t \t url: $(form).attr('action'), 
 
\t \t \t data: formData 
 
\t \t }) 
 
\t \t .done(function(response) { 
 
\t \t \t // Make sure that the formMessages div has the 'success' class. 
 
\t \t \t $(formMessages).hide().fadeIn(); 
 
\t \t \t $(formMessages).removeClass('error'); 
 
\t \t \t $(formMessages).addClass('success'); 
 

 
\t \t \t // Set the message text. 
 
\t \t \t $(formMessages).text(response); 
 

 
\t \t \t // Clear the form. 
 
\t \t \t $('#form_name').val(''); 
 
\t \t \t $('#form_email').val(''); 
 
\t \t \t $('#form_message').val(''); 
 
\t \t }) 
 
\t \t .fail(function(data) { 
 
\t \t \t // Make sure that the formMessages div has the 'error' class. 
 
\t \t \t $(formMessages).hide().fadeIn(); 
 
\t \t \t $(formMessages).removeClass('success'); 
 
\t \t \t $(formMessages).addClass('error'); 
 

 
\t \t \t // Set the message text. 
 
\t \t \t if (data.responseText !== '') { 
 
\t \t \t \t $(formMessages).text(data.responseText); 
 
\t \t \t } else { 
 
\t \t \t \t $(formMessages).text("Something went wrong."); 
 
\t \t \t } 
 
\t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="contact-form" class="col-md-12" method="post"> 
 
         <h1>Contact</h1> 
 
         <fieldset class="form-group"> 
 
          <input type="text" id="form_name" name="form_name" class="form-control" placeholder="Your name"> 
 
         </fieldset> 
 
         <fieldset class="form-group"> 
 
          <input type="email" id="form_email" name="form_email" class="form-control" placeholder="Your email" required> 
 
         </fieldset> 
 
          <fieldset class="form-group"> 
 
         <textarea class="form-control" id="form_message" name="form_message" rows="3" placeholder="Your message" required></textarea> 
 
         </fieldset> 
 
         <button type="submit" class="btn btn-primary">Send</button>      
 
        </form>

https://jsfiddle.net/huja5pru/2/

Answer 1

Use serialize() method when form is submit. 

check this fiddle https://jsfiddle.net/6o6htoh1/1/ 

Answer 2

あなたはjQueryオブジェクトにjQueryのセレクタを使用するときに、あなたのフォームを選択するときには、あなたがこのように最近、それを使用する必要があり、構文間違いがあります。

var form = $('#contact-form'); //and then use it directly in the ajax call like this 
form.serialize(); // not $(form).serialize() 

あなたのフィドルが更新されましたhttps://jsfiddle.net/ingemi/kbpnmptw/あなたは直接ajaxの呼び出しでシリアライズ