Javascript-форум - Глюк на событии submit

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Глюк на событии submit (https://javascript.ru/forum/misc/45732-glyuk-na-sobytii-submit.html)

Ну url правильный, он должен на сервер отправить через POST данные.. там у меня роутер смотрит что идёт через post по этому url. Но проблема в том что срабатывает GET, а не POST.

Если я задам форме метод POST, то у меня сработает роут (данные отлавливаются на сервере - я читаю их в логах), но потом просто выходит OK. Я думаю что данные отправились не через ajax() а тупо POST и все эти колбэки в ajax внасмарку. Я могу закомментировать тогда просто ajax и мне точно так же придёт ответ OK

Faab,
нормально всё уходит post
для примера

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
</head>
<body>  <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).text("loading");

    $.ajax({
      url: "http://javascript.ru/forum/login.php?do=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);
        },
        404:function(){
      alert('Страница не найдена');
    }
      }
    });
    return false;
  });

</script>
</body>
</html>

Я хотел сделать обход вот так

<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>
-
<input type="button" id="e_sub" value="send" />

<script>
window.onload = function(){
  var e_sub = document.getElementById("e_sub");
  e_sub.onclick = function(){
    console.log("event click");
    
    var form = document.getElementById("login-form");
    
    console.log("start ajax()");
    $.ajax({
        url: "/login",
        method: "POST",
        data: form.serialize(),
        complete: function() {
          $(":submit", form).text("reset");
        },
        statusCode: {
          200: function() {
            console.log("200");
            form.html("Вы вошли в сайт").addClass('alert-success');
            window.location.href = "/chat";
          },
          403: function(jqXHR) {
            console.log("403");
            var error = JSON.parse(jqXHR.responseText);
            $('.error', form).html(error.message);
          }
        }
    });
  };
};<script>

НО кажется эта строка не совсем то, что надо поместить в переменную форм:

var form = document.getElementById("login-form");

Ладно... залезу в исходники следующего урока, сравню с тем что есть на данный момент. Может и я что то начебучил и не вижу.

Воспользуюсь советом насчёт консоли, я не знал про такую опцию.

Цитата:

Сообщение от Faab

проблема в том что срабатывает GET, а не POST

Да ты ведь сам говоришь что происходит перезагрузка. Следовательно твой скрпипт не тормозит событие (не отменяет действие по умолчанию - отправку формы).
Причиной может быть либо ошибка в обработчике submit, либо ты вовсе не навешиваешь обработчик. Проверить можно перед навешиванием console.log($(document.forms['login-form']).length)

Кстати, в твоем последнем огрызке HTML два закрывающих </form>/ Может и открывающих у тебя тоже два? Так то в HTML не разрешаются вложенные формы. Они тупо игнорируются если не ошибаюсь.

Короче весь косяк вышел, как всегда, по моей вине.

- я недавно перешёл на Яндекс, и сам не обратил внимание на то, в консоле не выводились ошибки. Хром выдал мне все ошибки скопом.

- а сам косяк был в bower. Сам npm пакет Bower был установлен нормально, но Хром всё равно показывает что не может найти JQuery-файл. ( как я сам не догадался проверить работоспособность jq?) Ну и отсда весь косяк. При подключении внешнего jq , скрипт срабатывает нормально. Будут искать что не так с bower-jq, хотя bootstrap работает через bower вроде нормально.

Рони и Даник, спасибо за помощь и советы.

PS да и в логах мне сервер писал что при обращении к jq идёт 404..