Senden Sie ein Formular mit JQuery, ohne zu einem anderen Bildschirm zu navigieren

Question

Ich versuche es so zu erstellen, dass ein Formular Senden nicht dazu führt, dass die Seite navigiert und AjaxSubmit verwendet, um den Inhalt einzureichen. Wenn ich jedoch auf die Schaltfläche Senden klicke, navigiert es immer noch zur Seite im Aktionsattribut des Formulars. Hier ist das JavaScript:

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

Und hier ist die Form:

<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

Verwenden Event.PreventDefault ()

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

Answer 2

Eine andere Möglichkeit besteht <input id="save" type="Button" value="submit" /> Das gibt Ihnen eine Taste, die nichts anderes tut als einen JavaScript -Haken.

Verwenden Sie das folgende JavaScript, um Ihr Formular einzureichen, um Ihr Formular einzureichen

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

Dabei verlieren Sie die Möglichkeit, das Formular durch Drücken der Eingabetaste einzureichen. Sie können dies mit dem folgenden Stück JQuery überwinden:

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