ajax is loading the page to return a POST request

Question

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

class `search` doesn't exist. on you JS try `$("#search")` instead of `$(".search")` — 6339, Oct 13 '15 at 11:52

Niranjan N Raju · Accepted Answer · 2015-12-02T05:43:51.890

6

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

edited Dec 02 '15 at 05:43

answered Oct 13 '15 at 11:47

Niranjan N Raju

12,047
4
22
41

1

You're right, but it's probably worth explaining `e.preventDefault()` as simply selecting by ID will not stop the form being submitted. – Reinstate Monica Cellio Oct 13 '15 at 11:49
@Archer I was about add the link for that. Will add now. – Niranjan N Raju Oct 13 '15 at 11:50
@NiranjanNRaju thanks for your answer, but the page is still loading after lake a request – Istiak Mahmood Oct 13 '15 at 11:53
did u change `.search` to `#search`?? – Niranjan N Raju Oct 13 '15 at 11:57
changing this, it should work fine. It's working for me. – Niranjan N Raju Oct 13 '15 at 12:00
Glad it helped you :) – Niranjan N Raju Oct 13 '15 at 12:13

score 3 · Answer 2 · answered Oct 13 '15 at 11:52

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) {
                }
        });
    });
});

score 1 · Answer 3 · answered Oct 13 '15 at 12:17

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

score 0 · Answer 4 · edited Oct 13 '15 at 20:42

0

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
});

edited Oct 13 '15 at 20:42

Ryan Wheale

26,022
8
76
96

answered Oct 13 '15 at 12:00

Hussy Borad

626
5
20

score -1 · Answer 5 · edited May 23 '17 at 12:23

-1

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();

edited May 23 '17 at 12:23

Community

1
1

answered Oct 13 '15 at 11:47

mario.van.zadel

2,919
14
23

1

Not sure why this warranted uncommented downvotes. Sure, misses that the `on` handler will never get hit due to the wrong selector, but the `return false` information is just as important. – freedomn-m Oct 13 '15 at 12:13

score -1 · Answer 6 · answered Oct 13 '15 at 12:13

-1

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

answered Oct 13 '15 at 12:13

Niraj Karmick

154
6

ajax is loading the page to return a POST request

6 Answers6