jQuery Form does not submit

Question

I'm not able to submit the form. Where I'm going wrong?

<div>
    <form id = "search_form" action = "/dashboard/" method = "post">
        <span class = "pull-right">
        Search : <input type = "text" placeholder = "Search" id = "search">
        </span>
    </form>
</div>

jQuery

$("#search_form").submit(function(event) {
    event.preventDefault();
    var formdata = $(this).serialize();
    alert(formdata);
    $.ajax({
        type: "POST",
        url: "gallery.php",
        data: formdata,
        success: function(){alert('success');}
    });
});

Upon submitting, the flow does not goes into the jQuery function. Why?

Answer 1

Try:

$(function() {
    $("#search_form").submit(function(event) {
        event.preventDefault();
        var formdata = $(this).serialize();
        alert(formdata);
        $.ajax({
            type: "POST",
            url: "gallery.php",
            data: formdata,
            success: function(){alert('success');}
        });
    });
});

Everything works fine: http://jsfiddle.net/J6e4G/

Answer 2

You have not given your Search field a name, therefore you are passing no value to your gallery.php file, which is probably causing a server side error as it expects a value.

<div>
    <form id="search_form" action="/dashboard/" method="post">
        <span class="pull-right">
        Search : <input type="text" placeholder="Search" id="search" name="search">
        </span>
    </form>
</div>

Note, I've named the field search, you would need to check the variable name your PHP file is receiving from POST data and name it accordingly.