使用jQuery Web在同一页面上显示来自另一个HTML的结果

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

}