Отправьте форму с помощью jquery без перехода на другой экран
Вопрос
Я пытаюсь сделать так, чтобы отправка формы не приводила к навигации по странице и использованию 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>
Решение
Использовать событие.preventDefault()
$('#loginform').submit(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});
Другие советы
Другой вариант — изменить входной HTML-тег на <input id="save" type="Button" value="submit" />
который дает вам кнопку, которая ничего не делает, кроме как предоставляет перехватчик JavaScript.
Используйте следующий javascript для ajax-отправки вашей формы
$("#save").click(function() {
$("#loginform").ajaxSubmit();
}
При этом вы теряете возможность отправить форму, нажав Enter.Вы можете преодолеть это с помощью следующего фрагмента jquery:
$("input").keypress(function(e) {
if (e.which == 13) {
$("#save").click();
}
});
Не связан с StackOverflow