Question

I have the following working form:

<div id="player_won">
<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Score: <input type="text" name="score" />
<input type="submit" />
</form>
</div>

When clicking submit, it will submit the data to my database. All works great. The only downside is that it will show this insert.php file after a succesfull submit.

Now I also have the following trigger:

function gameWon(){ 
 var $game_board = $("#game_board_container");
 var $player_won = $("#player_won");
 $player_won.show();
 $game_board = $player_won = null;
};

When this happens, it will show the div where the form is in. Since all the fields are already pre-filled, I also want to submit the form at the same time, automaticly, without needing to press the submit button. (but still show the form/div ofcourse)

How to do this? In addition, I also don’t want to be forwarded to the insert.php file. I just want the div to pop-up when triggert, submit the form at the same time, and do nothing else (The user can close the pop-up div himself if needed).

Hope you guys can help me out!

Kind regards,
Maurice

Answer 1

To trigger a submit, just do $("form").submit() wherever you want to do a submit. To avoid going to insert.php file, add return false; at the end of the submit function.

However, for this to work you’ll have to do an ajax post.

E.g.:

$(function(){
    $("form").submit(function(){
        $.ajax({
        //ajax post logic
        });
        return false;
    });
});