jquery Обработчик Form.submit не запущен - PullRequest
0 голосов
/ 21 февраля 2020

пытается использовать обработчик form.submit(event) для отправки данных формы с ajax на основе следующего примера. jQuery AJAX отправить форму

Но моя функция обработчика, похоже, не срабатывает вообще, я попытался добавить return false и различные предупреждения поведения по умолчанию, но форма все еще получает отправлено в файл действий.

Javascript:

$('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });

HTML

<form id="formWebUI" class="form-inline pb-5" action="/php/form_WebUI.php" method="POST">
      <div class="container">
        <div class="row">
          <div class="col-3 p-0">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="alias" name="alias" placeholder="Alias">
            </div>
          </div>
          <div class="col-7 px-1">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="text" name="text" placeholder="Text">
            </div>
          </div>
          <div class="col-2 p-0">
            <input type="submit" class="btn btn-secondary w-100" id="formWebUI" value="Add">
          </div>
        </div>
      </div>
    </form>

У меня есть также пробовал кнопку быть элементом кнопки вместо ввода. Тип элемента всегда был представлен никогда кнопка. Я пробовал оповещать в javascript, но кажется, что обработчик никогда не вызывается, что бы я ни делал. Был бы благодарен за любой совет.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Хорошо, только что обнаружил проблему.

Форма загружается асинхронно из другого файла с Ajax. Поэтому, когда я регистрирую слушателя, это происходит до того, как форма загружается, и на него можно повлиять.

Итак, чтобы исправить, я просто заново инициализирую слушателя после загрузки формы из файла.

0 голосов
/ 21 февраля 2020

Ваш элемент ввода имеет тот же идентификатор с формой. Убедитесь, что элементы имеют уникальные идентификаторы, затем привяжите .submit к идентификатору формы.

Упаковка вашего JQuery в $ (документ). Уже решила проблему для меня. Смотрите jsfiddle здесь:

https://jsfiddle.net/520x83s7/

$( document ).ready(function(){
    $('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });
});
...