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

you have to serialize the data on submit (inside your method) — axel.michel
– axel.michel, Commented Aug 28, 2015 at 21:49

Mike G · Accepted Answer · 2015-08-28 21:54:12Z

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

answered Aug 28, 2015 at 21:54

Mike G

7586 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricardo Marques Over a year ago

Ugh - I really need more sleep. Thank you, this fixed it obviously.

axel.michel · Accepted Answer · 2015-08-28 21:55:01Z

1

As mentioned in the comment above. You'll have to serialize the method when you'll submit the form, not before:

$().ready(function() {
    var $form = $('form');

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

Example is here

answered Aug 28, 2015 at 21:55

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

1 Comment

Mike G Over a year ago

This is correct, but I'd be cautious of assuming a selector … there may be multiple forms on the page.

J Spring · Accepted Answer · 2015-08-28 21:48:20Z

0

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

I don't understand what $formContainer is as this is not a selector. That is what was breaking your code.

Hope this helps

answered Aug 28, 2015 at 21:48

J Spring

4922 gold badges6 silver badges19 bronze badges

2 Comments

Ricardo Marques Over a year ago

It's a selector I create further above my code. If that was the issue my serialize wouldn't return the correct names in the string. I still tried; didn't fix it. var $formContainer=$('.about-us > .container > .right');

J Spring Over a year ago

Most likely the hierarchy is incorrect. Since you have an ID for the form you are better of using that - see jsbin.com/ruqaqi

Collectives™ on Stack Overflow

Serialize returning objects with empty values

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related