Display reesults from another html on same page using jquery web

Question

Below is my code of html and jquery, i want to dsiplay results on submit button on the same page rather than its goes on next page. But it is not returning me any results and go to next page. HTML code

<form id="create" action="/engine_search/search/" method="get">
                            <input style="height:40px;" type="text" class="form-control" placeholder="Search" name="q">
                            <center>
                            <input style="float:left; margin-left:150px;" type="submit" class="btn btn-default" value="Search">
                                </center>
                         </form>

jquery code:

<script>
$(document).ready(function() {
$('#create').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
});
</script>

Answer 1

You should use event.preventDefault();

<script>
$(document).ready(function() {
$('#create').submit(function(event) { // catch the form's submit event
    event.preventDefault();
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
});
</script>

Look for console for any errors. It might be helpful.

Answer 2

<input style="float:left; margin-left:150px;" type="submit" class="btn btn-default" value="Search" onclick="return SubmitFunction(this);">

Javascript :

function SubmitFunction(thisId){
 $.ajax({ // create an AJAX call...
    data: $(thisId).serialize(), // get the form data
    type: $(thisId).attr('method'), // GET or POST
    url: $(thisId).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#created').html(response); // update the DIV
    }
});

 return false; // cancel original event to prevent form submitting

}