Question

I have a form with the following button:

<input id="test2" class="formbutton" type="submit" value="Play again" />

Pressing the submit fires this javascript:

$("#test2").click(function(){
        $.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

This all works fine. The problem is when I try to ad location.href="mahjong.php?layout=win"; What I want is that when I press this button, the form is submitted and loads the url mahjong.php?layout=win

If I use:

$("#test2").click(function(){
location.href="mahjong.php?layout=win";
$.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

I go to the url but the form is not always submitted. How to fix this. I cannot edit the insert.php file since this one is used by other buttons too (where no redirection is needed)

Answer 1

Go to the link after the form has returned, using a success handler:

$("#test2").click(function () {
    $.ajax({
        type: "POST",
        data: $("#form").serialize(),
        cache: false,
        url: "insert.php",
        success: function () {
            location.href = "mahjong.php?layout=win";
        }
    });
    return false;
});

It’s probably worth putting some visual notification on the page, e.g. a spinner or disabling the button, so that the user knows something is happening and doesn’t click the button again.