Почему перезагружается страница?

Question

[Владислав]

Добрый день, помогите с обработкой форм. Задание следующее - есть html-форма, нужно получать значение полей, передавать их в модуль php и возвращать результат работы модуля в div без перезагрузки страницы.

Коды

<form id="searchForm" method="post">
                        <div class="input-group">
                            <input type="text" class="form-control" name = "form-control" placeholder="Поиск..." aria-label="Поиск...">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="submit">Найти</button>
                            </span>
                        </div>
                        <div class="form-check mt-2">
                            <label class="form-check-label">
                              <input type="checkbox" class="form-check-input" name = "form-check-input">
                              Не учитывать регистр
                            </label>
                        </div>
                    </form>
					<hr/>
                    <div id="searchResult"></div>

<?php
echo $_POST['word'];
?>

$(function(){
   $("#searchForm").submit(function (event) {
       submitForm();
   });

   function submitForm(){
       var form = $("#searchForm");
       var word = form.find("input[name=form-control]").val();
       var register = form.find("input[name=form-check-input").val();

       $.ajax({
          type:"POST",
           dataType: "json",
           url: "1.php",
           data:{
              "word": word,
               "register": register
           },
           success:function(data) {
               if (data.success){
                   $('#searchResult').html(data);
               } else {
                   alert("Ошибка");
               }
           }
       });
   }
});

Comments

[Владислав]

event.preventDefault() добавлять пробовал, страницу не перезагружает, но и в div ничего не возвращает

[xzdshr]

это странно, может у вас код в success блок аякса не попадает потому что невалидный json в ответ приходит?
повтыкайте console.log в js код и var_dump в php код, посмотрите ответ сервера и логи js во время отправки формы, тогда станет ясно

Answer 1

[Павел Корнилов]

Рабочий пример AJAX отправки формы в нативном коде.

Answer 2

[Lander]

$("#searchForm").submit(function (event) {
       submitForm();
       return false;
   });

Вроде так...

Comments

[Сергей Горностаев]

Так уже много лет делать не рекомендуется.

[Lander]

Сергей Горностаев, Хм... Интересно. А почему? (Я просто во фронтенд не очень могу)

[Сергей Горностаев]

Lander, методы события позволяют тоньше управлять процессом обработки события. Кроме event.preventDefault() есть ещё .stopPropagation(), .stopImmediatePropagation() и прочее. К тому же, методом отменить обработчик по умолчанию можно в начале функции обработчика, а возвращаемым значением только в конце. Соответственно, если в середине произойдёт ошибка, в первом случае обработчик по умолчанию не будет вызван, а во втором будет.

[Lander]

Сергей Горностаев, Как интересно. Спасибо! Буду теперь знать.

Answer 3

[Виктор Янышев]

$("#searchForm").submit(function (event) {
       submitForm();
   });

Читаем так, когда срабатывает отправка формы (которая и перезагружает страницу) вызвать функцию, отправки ajax.
А нужно чтобы читалось так, при нажатии кнопки с отменённым стандартным поведением (https://developer.mozilla.org/ru/docs/Web/API/Even... отправляются данные аяксом на сервер не перезагружая страницу и выводя полученный ответ от сервера.