CODEWITHSUNDEEP
jqueryserialization
Ben
Ben

Reputation: 11188

jQuery's .serialize() doesn't do anything

I've got a fairly simple form with some checkboxes, radiobuttons and selectboxes. I want to post all the selected form-data using jQuery's $.ajax. But for some reason the form just doesn't get serialized. I'm not sure what's causing this... (Sidenote: $('#FormID').submit(..) doesn't work either with me). So I've created a button with the following code:

$(document).ready(function() {
    $('#DoSearchRequest').click(function(event) {
        //event.preventDefault(); // read about this somewhere, doesn't help
        $('#res').html($('#FormSearch').serialize()); // just some <p> to output the result to
        $.ajax({
            url:        'http://www.domain.nl/ajax/GetResultsBySearchRequest.php',
            data:       $('#FormSearch').serialize(),
            type:       'POST',
            success:    function(result) {
                            console.log(result);
                        },
            error: function(a, b, c) { console.log(a); }

        });

        return false;
    });
});

My button is outside the form (it doesn't matter if it's in the form either).

My form:

<form name="FormSearch" id="FormSearch" method="post">
... form elements
</form>

I'm using jQuery 1.7.1 and jQueryUI 1.8.18

Upvotes: 2

Views: 10443

Answers (4)

csandreas1
csandreas1

Reputation: 2378

use name attribute for all your inputs in the form (including button) E.g. <input type="text" id="fname" name="fname"/>

Then you can test if the serial() function works:

$('#contact-form').submit(function() {
  alert($(this).serialize());
});

Then in Ajax:

  $.ajax({
    type: 'POST',
    url: 'SendAd.php',
    dataType: 'json',
    data: $('#contact_form').serialize(),
})

Upvotes: 1

Jonathan Morales V&#233;lez
Jonathan Morales V&#233;lez

Reputation: 3646

Silly but for me it was that I didn't name the fields in my form so .serialize gave me an empty string, also .serializeArray didn't work.

Do name your form fields or you won't get any values.

<input name='importantField'/>

is not the same as

<input id='importantField'/>

.serialize or .serializeArray or even default form submit won't work if you haven't defined any names on your form fields.

Upvotes: 10

nnnnnn
nnnnnn

Reputation: 150040

After looking at your preview webpage I'd say the problem might be that you have nested form element "form543" inside another form element "searchbar".

Testing in Firefox, I found that $("#form543").length was 0 so jQuery obviously can't find the form at all. When I tried $("#searchbar").serialize() it returned actual field values for the select elements and the checkboxes that I'd checked and so forth.

I'd suggest removing the outer form element "searchbar" (or otherwise change the markup so you don't have nested forms) and see if your JS code works then.

Upvotes: 3

Jeffrey Muller
Jeffrey Muller

Reputation: 850

You have to make something like that :

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

Upvotes: 1

Related Questions