CODEWITHSUNDEEP
javascriptphpjqueryajax
Istiak Mahmood
Istiak Mahmood

Reputation: 2422

ajax is loading the page to return a POST request

When i make a "POST" request through ajax, the page is loading when returning the request.

Don't we use ajax to prevent the entire page to reload ?

This is my html code:

<form method="post">
<div align="center" class="col-md-10">
    <input  type="text" id= "input" name="input" >
 </div><
 <div class="form-group">
    <button type="submit" class="btn btn-default" id="search">
     Search
    </button>
  </div>
  </form>

and this is my ajax request:

<script>
    $(document).ready(function () {
    $(".search").on('click', function () {
            var data = {};
            data['input'] = $('#input').val();
            // Submit data via AJAX§
            $.ajax({
            url: '/home',
                    type: 'post',
                    data: data,
                    success: function (data) {
                    }
            });
    });
    });
</script>

Do anyone knows how to fix this problem and what i am doing wrong !!!

Upvotes: 2

Views: 1281

Answers (6)

Niranjan N Raju
Niranjan N Raju

Reputation: 11987

I think, you have search as id not class. Its not calling ajax at all. It is getting submit because its a submit button, so change your code like this,

Note: .search will not work,

$("#search").on('click', function (e) {
    e.preventDefault();
    var data = {};
    data['input'] = $('#input').val();
        // Submit data via AJAX
    $.ajax({
        url: '/home',
        type: 'post',
        data: data,
        success: function (data) {

        }
    });
});

e.preventDefault() is used to prevent the default behaviour of submit button(By default on click of submit button will reload the page.)see more about e.preventDefault() , here or here

Upvotes: 6

Hussy Borad
Hussy Borad

Reputation: 583

If you need to submit form without page load you need to prevent the default behavior of the button:

$(your_button).on('click', function (ev) {
    ev.preventDefault();
    // do stuff here
});

Upvotes: 0

Pedro Lobito
Pedro Lobito

Reputation: 98971

Your code is OK.
You just need to add preventDefault() to the click function, and change from .search to #search, i.e..

<script>
    $(document).ready(function () {
    $("#search").on('click', function (e) {
            e.preventDefault();
            var data = {};
            data['input'] = $('#input').val();
            // Submit data via AJAX§
            $.ajax({
            url: '/home',
                    type: 'post',
                    data: data,
                    success: function (data) {
                    }
            });
    });
    });
</script>

event.preventDefault()

This method does not accept any arguments. For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event

Upvotes: 1

Niraj Karmick
Niraj Karmick

Reputation: 154

Use type="button" instead of submit. Submit button will submit the form as it is.

Upvotes: -1

Ashish Choudhary
Ashish Choudhary

Reputation: 2034

you are using Id and picking the class which is wrong.

use 

$("#search").on('click', function (e) {

instead of 

$(".search").on('click', function (e) {

so the final JS would be

<script>
$(document).ready(function () {
    $("#search").on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var data = {};
        data['input'] = $('#input').val();
        // Submit data via AJAX§
        $.ajax({
        url: '/home',
                type: 'post',
                data: data,
                success: function (data) {
                }
        });
    });
});

Upvotes: 3

mario.van.zadel
mario.van.zadel

Reputation: 2949

You have to return false in your onclick event handler to stop the form being submitted:

$(".search").on('click', function () {
    var data = {};
    data['input'] = $('#input').val();
    // Submit data via AJAX§
    $.ajax({
        url: '/home',
        type: 'post',
        data: data,
        success: function (data) {
        }
    });

    return false;
});

Please also check this to get more information about the difference between return false; and e.preventDefault();

Upvotes: -1

Related Questions