Глюк на событии submit
При нажатии на кнопку, не срабатывает метод POST , а тут же срабатывает метод GET, куда подставляются значения username и password. Если я даже и добавлю к форме метод "POST", то JS-скрипт не успеет обработать событие submit, и данные уйдут не с помощью ajax().
Это может быть глюком Bootstrap?
<form class="form-horizontal login-form" name="login-form">
<div class="form-group">
<label for="input-username" class="col-lg-2 control-label">Имя</label>
<div class="col-lg-10">
<input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
</div>
</div>
<div class="form-group">
<label for="input-password" class="col-lg-2 control-label">Пароль</label>
<div class="col-lg-10">
<input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary" data-loading-text="Отправляю...">Войти</button>
<span class="help-block error"></span>
</div>
</div>
</form>
<script>
$(document.forms['login-form']).on('submit', function() {
var form = $(this);
$('.error', form).html('');
$(":submit", form).button("loading");
$.ajax({
url: "/login",
method: "POST",
data: form.serialize(),
complete: function() {
$(":submit", form).button("reset");
},
statusCode: {
200: function() {
form.html("Вы вошли в сайт").addClass('alert-success');
window.location.href = "/chat";
},
403: function(jqXHR) {
var error = JSON.parse(jqXHR.responseText);
$('.error', form).html(error.message);
}
}
});
return false;
});
</script>
|
Faab,
что у вас в 29 строке творится??? |
Этот отрывок взят из исходника на этом сайте - я не могу точно сказать как работает эта строка. На сколько я понял эта строка предназначена для аттрибута data-loading-text="Отправляю..."> в submit и видимо должна как то влиять на состояние кнопки после нажатия.
Единственное, что могу точно сказать, что кроме jquery и bootstrap никаких другие клиентские библиотеки не подключается. Я уже комментировал строки 28 и 29, убирал аттрибут data-loading-text, всё равно после нажатия происходит событие GET и я получаю в адресную строку : http://77.777.777.777:3000/login?use...&password=pass |
рони,
поменяйте button на text в строках 29 и 36 и возможно вам улыбнётся счастье |
:no: неа, чудо не произошло. У меня такое впечатления что до выполнении ajax вообще не успевает дойти дело. Но я не могу это протестировать, так как все записи в консоле обновляются/стираются.
Вот весь конечный исходный код (с поправкой submit на text - c.70 и c.77):
<!DOCTYPE html>
<html>
<head>
<title>Регистрация и вход</title>
<link rel="stylesheet" href="/vendor/bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/app.css"/>
<script src="/vendor/bower_components/jquery/jquery.js"></script>
<script src="/vendor/bower_components/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<header>
</header>
<section class="container">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li><a href="/">Главная</a></li>
<li><a href="/chat">Чат</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="" onclick="$('<form method=POST action=/logout>').submit();return false">Выйти</a></form></li>
</ul>
</nav>
<h1>Регистрация и вход</h1>
<p>Введите имя пользователя и пароль. Если такого пользователя нет - он будет создан.</p>
<form class="form-horizontal login-form" name="login-form">
<div class="form-group">
<label for="input-username" class="col-lg-2 control-label">Имя</label>
<div class="col-lg-10">
<input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
</div>
</div>
<div class="form-group">
<label for="input-password" class="col-lg-2 control-label">Пароль</label>
<div class="col-lg-10">
<input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary" data-loading-text="Отправляю..." > Войти</button>
<span class="help-block error"></span>
</div>
</div>
</form>
</form>
-
<script>
$(document.forms['login-form']).on('submit', function() {
var form = $(this);
$('.error', form).html('');
$(":text", form).button("loading");
$.ajax({
url: "/login",
method: "POST",
data: form.serialize(),
complete: function() {
$(":text", form).button("reset");
},
statusCode: {
200: function() {
form.html("Вы вошли в сайт").addClass('alert-success');
window.location.href = "/chat";
},
403: function(jqXHR) {
var error = JSON.parse(jqXHR.responseText);
$('.error', form).html(error.message);
}
}
});
return false;
});
</script></section>
<footer>
</footer>
</body>
</html>
|
Faab,
я не вижу замены в вашем коде |
$(document.forms['login-form']).on('submit', function() {
var form = $(this);
$('.error', form).html('');
$(":submit", form).text("loading");
$.ajax({
url: "/login",
method: "POST",
data: form.serialize(),
complete: function() {
$(":submit", form).text("reset");
},
statusCode: {
200: function() {
form.html("Вы вошли в сайт").addClass('alert-success');
window.location.href = "/chat";
},
403: function(jqXHR) {
var error = JSON.parse(jqXHR.responseText);
$('.error', form).html(error.message);
}
}
});
return false;
});
снова нет, снова GET |
Рони, а если вынесу кнопку submit за пределы формы (то есть станет просто кнопка), и повешу на этот элемент просто событие клик, то у меня стоит проблема, как мне заменить эту строчку тогда:
var form = $(this); |
Faab,
url: "/login", это то сменили на то что вам нужно? |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 04:36. |