Serialize returning objects with empty values

Question

Having some trouble with serialize. I have my name attributes set but still I'm getting a string with the correct names but no values (even though I'm typing info into the input fields) - something like this:

magnolia_name=&magnolia_email=&magnolia_message=

Driving me crazy. Here's the html code (I commented out the file input, just in case that was the culprit, no luck).

                 <form id="contact" method="POST">
                    <div class="group">      
                      <input type="text" name="magnolia_name" id="magnolia_name" required>
                      <span class="bar"></span>
                      <label>Name</label>
                    </div>

                    <div class="group">      
                      <input type="text" name="magnolia_email" id="magnolia_email" required>
                      <span class="bar"></span>
                      <label>E-mail</label>
                    </div>

                    <div class="group textarea">      
                      <textarea name="magnolia_message" id="magnolia_message"></textarea>
                      <span class="bar"></span>
                      <label>Message</label>
                    </div>

                  <!--   <label for="fileupload" class="fileupload-label">
                        <span>Attach files <span class="glyphicon glyphicon-upload"></span></span>
                    </label>
                    <input id="fileupload" type="file" name="files" multiple /> -->
                    <div class="uploaded-files"></div>
                    <div class="submit">
                        <input type="submit" value="Send!" name="submit" id="submit">
                        <div id="progress">
                            <span>Uploading file(s)</span>
                            <div class="bar"></div>
                        </div>
                    </div>
                </form> 

And here's my JS

var $form = $formContainer.children('form');
var formData = $form.serialize();
$form.submit(function(e){
    console.log(formData);
    e.preventDefault();
});

Answer 1

Change your submit handler to capture the formData in the event.

$form.submit(function(e){
    var formData = $form.serialize();
    console.log(formData);
    e.preventDefault();
});