Display reesults from another html on same page using jquery web

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>

Answers 1

  • <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
    

    }


Related Articles