Отправить форму с помощью jquery без перехода на другой экран

Question

Я пытаюсь сделать так, чтобы при отправке формы не происходило перемещение по странице, и для отправки содержимого использовался ajaxSubmit. однако, когда я нажимаю кнопку отправки, она все равно переходит на страницу в атрибуте действия формы. Вот JavaScript:

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

и вот форма:

<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

Использовать event.preventDefault ()

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

Answer 2

Другим вариантом является изменение входного HTML-тега на <input id="save" type="Button" value="submit" />, который дает вам кнопку, которая ничего не делает, кроме как обеспечивает ловушку JavaScript.

Используйте следующий javascript, чтобы ajax отправил вашу форму

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

При этом вы теряете возможность отправить форму, нажав клавишу ввода. Вы можете преодолеть это с помощью следующего фрагмента jquery:

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