Question

This is my form:

<form id="submitsearch" action="Classes/system/main/searchresult.php" method="POST">
Search by <span style="font-size:15px;">(developer, specialization, profession,major)</span>
    <input type="text" name="searchbox" id="searchbox" />
    in
    <select style="text-align:center;" name="countrysearch" id="countrylist">
        <option selected="selected" value="0">None</option>
        <option value="1">USA</option>
    </select>
<input style="margin-left:25px;" id="submitSearch" type="submit" value="Search"/>
</form>

and this is the Ajax jquery code:

    $("#submitSearch").click(function(){

    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#submitsearch').find('#pagePanel').html(response);

});     

Why isn’t it working ? The php file is returning the correct result normaly.

But i want it to load inside another div with an id “pagePanel” without reloading, using ajax.

Any help ? I’m new to Ajax.

Edit:

    $("#submitbutton").click(function(){

    $.ajax({type:'POST', url: 'Classes/system/main/searchresult.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#pagePanel').html(response);

}})});      

This worked out with me.

Thanks for all your help.

Answer 1

If you have a input of type submit, it will, guess what :), submit the form, and therefore reload the page. Turn it into:

<input style="margin-left:25px;" id="submitSearch" type="button" value="Search"/>

Then make sure you actually have a pagePanel element in your html.

And now a couple of suggestions:

1. don’t id your form #submitsearch and the button as #submitSearch… confusion may arise
2. you can use AJAX’s .load() instead of .ajax() to get directly the result in the DIV:

So:

$("#pagePanel").load('Classes/requests/search.php', {$('#submitsearch').serialize()});