Question

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

Answer 1

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.