Soumettez un formulaire en utilisant jQuery sans naviguer vers un autre écran

Question

J'essaie de faire en sorte qu'un formulaire soumis ne provoque pas la navigation de la page et utilise ajaxSubmit pour soumettre le contenu. Cependant, lorsque je clique sur le bouton d'envoi, il accède toujours à la page dans l'attribut d'action du formulaire. Voici le javascript:

var options = {
    success: processLogin
};
$('#loginform').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
});

et voici le formulaire:

<form id='loginform' action='login.php' method='post'>
    <table id='logintable'>
        <tr>
            <td>Room:</td>
            <td><input id='roomname' type='text' name='roomname' /></td>
        </tr>
        <tr>
            <td>Nickname:</td>
            <td><input id='nickname' type='text' name='nickname' /></td>
        </tr>
        <tr>
            <td colspan='2' class='center'><input type='submit' value='Submit' /></td>
    </table>
</form>

Answer 1

Utilisez event.preventDefault ()

$('#loginform').submit(function(e) {
    e.preventDefault();
    $(this).ajaxSubmit(options);
});

Answer 2

Une autre option consiste à remplacer la balise HTML d'entrée par <input id="save" type="Button" value="submit" />, ce qui vous donne un bouton qui ne fait rien, à l'exception d'un crochet javascript.

Utilisez le javascript suivant pour ajax soumettre votre formulaire

$("#save").click(function() {
    $("#loginform").ajaxSubmit();
}

Ce faisant, vous perdez la possibilité de soumettre le formulaire en appuyant sur Entrée. Vous pouvez résoudre ce problème avec le script suivant:

$("input").keypress(function(e) {
    if (e.which == 13) {
        $("#save").click();
    }
});