0

При нажатии на кнопку submit, данные из формы заносятся в базу данных, а вместе с этим открывается файл form.php, который как раз отправляет данные в БД. Я попытался написать скрипит на JQ, закинул туда preventDefault, а внутрь засунул ajax-запрос, но проблема осталась: при нажатии на кнопку перенаправляет на пустую страницу (form.php). Также, по задумке, при успешной отправке формы в БД должен вылезать alert с "Успешно!", но этого не происходит. Я думаю, что проблема в ajax запросе, но мне не хватает знаний. Подскажите, пожалуйста.

Код формы:

<form class="popup__form" method="get" name="form">
              <input
                class="popup__form-text popup__form-input popup__form-fields"
                type="text"
                name="name"
                placeholder="Ваше имя"
              />
              <input
                class="popup__form-tel popup__form-input popup__form-fields"
                type="tel"
                name="tel"
                placeholder="Номер телефона"
              />
              <input
                class="popup__form-email popup__form-input popup__form-fields"
                type="email"
                name="email"
                placeholder="Электронная почта"
              />
              <input
                class="popup__form-submit popup__form-input popup__form-button"
                id="#btn__submitForm"
                type="submit"
                name="popup-submit"
                value="Отправить заявку"
              />
            </form>

Код form.php:

<?php
    if (isset($_GET['popup-submit'])) {
      $nameform = $_GET['name'];
      $telform = $_GET['tel'];
      $emailform = $_GET['email'];
      $mysqli = new mysqli("localhost", "root", "", "dudich");
      if ($mysqli->connect__errno) {
        echo "Извините, возникла проблема на сайте";
        exit;
      }
      $name = '"' . $mysqli->real_escape_string($nameform) . '"';
      $tel = '"' . $mysqli->real_escape_string($telform) . '"';
      $email = '"' . $mysqli->real_escape_string($emailform) . '"';
      $query = "INSERT INTO users (name, tel, email) VALUES ($name, $tel, $email)";
      $result = $mysqli->query($query);
      $mysqli->close();
    }
?>

Код JQ:

$('#btn__submitForm').submit(function(e){
    e.preventDefault();

    $.ajax({
        url: 'form.php',         
        method: 'get',             
        dataType: 'html',     
        success: function(data){   
            alert('Успешно!');          
        }
    });
})

UPD:

JQ:

$('.popup__form-button').click(function(e){
    e.preventDefault();

    $.ajax({
        url: 'form.php',         
        method: 'get',           
        dataType: 'html',     
        success: function(data){   
            alert('Успешно!');           
        }
    });
})

button:

<form
              class="popup__form"
              method="get"
              name="form"
              action="form.php"
            >
              <input
                class="popup__form-text popup__form-input popup__form-fields"
                type="text"
                name="name"
                placeholder="Ваше имя"
              />
              <input
                class="popup__form-tel popup__form-input popup__form-fields"
                type="tel"
                name="tel"
                placeholder="Номер телефона"
              />
              <input
                class="popup__form-email popup__form-input popup__form-fields"
                type="email"
                name="email"
                placeholder="Электронная почта"
              />
              <button
                class="popup__form-submit popup__form-input popup__form-button"
                name="popup-submit"
              >
                Отправить заявку
              </button>
            </form>
1
  • У вас просто не происходит того события, которое вы прописали в jQ. Вы поставили обработчик подтверждения КНОПКИ. Кажется, подтверждать нужно отправку формы....
    – rusgeli
    2 дек 2022 в 8:45

1 ответ 1

1

Должно быть не

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

а

$('.popup__form').submit(function(e){

т.к. событие отправки происходит именно формы, а не кнопки. У кнопки происходит лишь клик. Не смотря на то, что у неё стоИт тип submit, это не говорит о том, что на неё происходит событие сабмита, а то, что она ответственна за сабмит формы


P.S. Если идёт работа через ajax, то вообще зачем у кнопки стОит тип submit? Можно сделать обычную кнопку и отправлять данные по клику на неё

7
  • Сначала я сделал так, как вы посоветовали, но результат тот же. Далее я поменял по вашему совету кнопку и сделал её по-человечески, добавив button и убрав тип submit. В JQ я закинул класс кнопки и вместо submit поменял на click, но результат такой же - открывает пустую страницу php. Я добавил UPD в вопросе внизу, чтобы вы могли увидеть изменения. Подскажите, пожалуйста, что я сделал не так?
    – syrex
    2 дек 2022 в 9:46
  • <button type="button" ...
    – u_mulder
    2 дек 2022 в 9:51
  • @syrex тег <button> по умолчанию тоже имеет тип submit, так что там придётся писать тип button :)) Вот такая вот глупость... кнопка с типом кнопка 2 дек 2022 в 9:54
  • @АлексейШиманский, поменял на тип button, но теперь не отправляются данные( Тут наверное уже конфликт с php кодом? Потому что у button есть name = "popup-submit", который присутствует в в условии в php коде. Что посоветуете?
    – syrex
    2 дек 2022 в 10:05
  • @syrex "не отправляются данные" - с фронта js или из php? Посмотреть уходят ли данные на бэкенд - можно в консоли разработчика в браузере (который по F12 открывается). и смотреть вкладку Network........ Для просмотра что не так на бэке - влючают показ ошибок и используют отладку (можно смотреть все ответы в данном топике ru.stackoverflow.com/q/701142/191482 ), аналогично есть для js ru.stackoverflow.com/q/701137/191482 ....тоже можно увидеть попадает ли вообще что-то в код... 2 дек 2022 в 10:09

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.