Why does an alert redirect my page?

Question

Why does everytime I put an alert to my ajaxform the page redirects to its php script? but when I remove the alert the ajax doesn't redirect it. I don't want my page to redirect to its php script.

$(document).ready(function(){
           $("#save").click(function(){
           $("#f1").ajaxForm({
                    alert("Submit Successful!");
                    });//ajaxform
    });
});

use return false; after alert – Vignesh Pichamani Sep 13 '13 at 05:31 — Vignesh Pichamani, Sep 13 '13 at 05:31
Because that is not the right syntax. try using a callback – omma2289 Sep 13 '13 at 05:31 — omma2289, Sep 13 '13 at 05:31

score 3 · Answer 1 · answered Sep 13 '13 at 05:31

3

Replace

$("#save").click(function(){

with

$("#save").click(function(e){
   e.preventDefault();

pass event as argument and use event.preventDefault() so page will not be redirect.

Official Document

answered Sep 13 '13 at 05:31

Dipesh Parmar

27,090
8
61
90

score 3 · Answer 2 · answered Sep 13 '13 at 05:33

You're not using several things properly. Try this:

$(document).ready(function() {
    $("#save").click(function(e) {
        e.preventDefault(); //cancel default action (not strictly necessary...)

        $("#f1").ajaxForm(function() { //N.B. 'function() ' added - before it was an object!
            alert("Submit Successful!");
        });
    });
});

score 0 · Answer 3 · answered Sep 13 '13 at 05:31

0

trying stopping the default event behavior.

 $("#save").click(function(e){ 
    e.preventDefault();

answered Sep 13 '13 at 05:31

DevZer0

13,433
7
27
51

score 0 · Answer 4 · edited May 23 '17 at 12:17

0

Use return false: to stop the request to server

$(document).ready(function () {
     $("#save").click(function () {
         $("#f1").ajaxForm(function(){
             alert("Submit Successful!");
             return false;//add return false to stop the request to server
         }); //ajaxform
     });
 });

edited May 23 '17 at 12:17

Community

1
1

answered Sep 13 '13 at 05:33

Somnath Kharat

3,570
2
27
51

score 0 · Answer 5 · answered Sep 13 '13 at 05:45

It is the normal behavior (if the clicked element is an anchor tag pointing to another page): you click a link and it redirects your page.
If you want to use that link as a button and bind a certain action to it, you should definitely stop the normal behavior of the link: prevent it from redirecting the page.
This is achievable in many ways, but the best one (at least from a semantic point of view) is to call the preventDefault method on the actual click event:

$('a').on('click', function(event){
    // prevents the normal behavior of this "click" action
    // in this case, it prevents the link from changing the url
    event.preventDefault();

    //.. your logic here
});

score -1 · Answer 6 · answered Sep 13 '13 at 05:31

-1

Add preventDefault() or return false;.

$("#save").click(function(e) {
    $("#f1").ajaxForm({
        alert("Submit Successful!");
    });//ajaxform
    e.preventDefault();
    //or
    return false;
});

answered Sep 13 '13 at 05:31

Arvind Bhardwaj

5,231
5
35
49

1

Using `return false;` is actually not the correct way to halt an event (or it's at least very destructive): http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – Tim Dorr Sep 13 '13 at 05:33

Sundar · Answer 7 · 2013-09-13T05:42:36.907

-1

Try this use preventDefault()

$(document).ready(function(){

    $("#save").click(function(e){
       //Stay in the same page
       e.preventDefault();

        $("#f1").ajaxForm({

            alert("Submit Successful!");

        });//ajaxform

    });

});

edited Sep 13 '13 at 05:42

answered Sep 13 '13 at 05:32

Sundar

4,580
6
35
61

Why does an alert redirect my page?

7 Answers7