показать модальное диалоговое окно подтверждения после отправки формы

Question

У меня есть форма, и мне нужно, чтобы она выполняла 2 действия после нажатия кнопки отправки:

Мне нужно, чтобы данные формы обрабатывались в созданном мной подтверждении .php.
Мне нужен модальный диалог для отображения подтверждения.

Моя форма:

<form class="quote-form" method="post" action="acknowledge.php">

  <div class="form-row">
    <label>
      <span>Full Name</span>
      <input type="text" name="name">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Email</span>
      <input type="email" name="email">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Phone</span>
      <input type="number" name="phone">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Nature of Enquiry</span>
      <select name="enquiry">
        <option selected>General Enquiry</option>
        <option>Logo Design</option>
        <option>Web Design</option>
        <option>Branding</option>
        <option>Social Media</option>
        <option>Email/Web Hosting</option>
      </select>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Message</span>
      <textarea name="message"></textarea>
    </label>
  </div>

  <div class="form-row">
    <button type="button" name="send">Get A Quote</button>
  </div>

</form>

Я новичок в Javascript и AJAX, но я скопировал код из некоторых похожих потоков и попытался настроить его для своего сайта.

<script type="text/javascript">
$(".quote-form").submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    data: $(".quote-form").serialize(),
    url: 'url',
    success: function(data) {
      $("#myModal").modal("show");
    }
  });
  return false;
  });
});
</script>

<!--Modal container-->
<div id="myModal" class="modal">
  <!-- Modal content--> 
  <div class="modal-content">
    <span class="close">x</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

При нажатии кнопки отправки ничего не происходит. Даже accept.php не выполняется. Что я делаю неправильно?

javascript php html

3

K. Mak 19 Июн 2016 в 15:08

Можете ли вы опубликовать "рабочий" пример в Jsfiddle? Также вы проверяли свою консоль и / или использовали такой инструмент, как Fiddler, чтобы проверить, что происходит?

–

Nicolas Bouvrette

19 Июн 2016 в 15:12

Я никогда раньше не использовал Fiddler

–

K. Mak

19 Июн 2016 в 15:52

@ K.Mak, пожалуйста, предоставьте также свой CSS и посмотрите мой ответ

–

Jonathan

19 Июн 2016 в 18:24

Answer 1

Вам нужно обернуть свой код в document.ready () :

<script type="text/javascript">
    $(function(){
        $(".quote-form").submit(function(e){
            e.preventDefault();
            $.ajax({
                type : 'POST',
                data: $(".quote-form").serialize(),
                url : 'url',
                success: function(data) {
                    $("#myModal").modal("show");
                }
            });
            return false;
        });
    });
</script>

ОБНОВЛЕНИЕ

Вам нужно изменить тип вашей кнопки на submit вот так

<button type="submit" name="send">Get A Quote</button>

1

Amin Jafari 19 Июн 2016 в 15:50

По-прежнему ничего не происходит. Должен ли я поместить этот код внизу html или, может быть, в голову?

–

K. Mak

19 Июн 2016 в 15:46

Не имеет значения, в любом случае это должно работать, также вам нужно изменить тип кнопки проверить обновление

–

Amin Jafari

19 Июн 2016 в 15:49

Answer 2

Несколько вещей, которые вас сдерживали:

В вашем javascript у вас есть завершающий }); в самом конце.
Ваш button ничего не делает для запуска события отправки в javascript. Вам следует изменить кнопку или использовать правильный ввод для отправки. Или используйте type="submit".
Вы ничего не делаете с data в обратном вызове успешного выполнения. Поэтому, когда открывается модальное окно, больше ничего не происходит.
Ваш URL-адрес в запросе AJAX не указан. Вы можете использовать this.action, чтобы использовать здесь URL действия формы.

Я внес некоторые изменения, которые вы можете просмотреть в моей скрипке.

Есть некоторые части скрипки, которые вы должны игнорировать, такие как параметры ajax url и data. Это должно быть что-то вроде:

  $.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
    //...
  });

Сейчас мы, очевидно, не знаем, включили ли вы на свою страницу свои сценарии зависимостей, такие как jQuery и bootstrap.

Например: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> - это javascript начальной загрузки.

Убедитесь, что jQuery находится выше начальной загрузки, иначе начальная загрузка не загрузится, так как она зависит от jQuery. Возможно, вам также понадобится использовать загрузочный CSS.

Наконец, вам нужно убедиться, что ваш action в форме является правильным URL-адресом, и что данные в вашей форме, которые отправляются, обрабатываются и echo возвращаются в виде HTML.

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

Вы можете использовать инструменты разработчика в своем браузере и отмечать любые ошибки, вызванные javascript в консоли, если у вас все еще есть проблемы. ( Ctrl + Shift + I ).

Вам не нужно ничего оборачивать в готовом документе.

1

Jonathan 19 Июн 2016 в 19:03

Answer 3

Вы делаете две вещи неправильно

Сначала вам нужно обернуть свой код document.ready

$(function(){

});

Тогда вам нужно исправить свой URL

var form = $(".quote-form");
$.ajax({
    type : 'POST',
    data: form .serialize(),
    url : form.attr('action'),
    success: function(data) {
        $("#myModal").modal("show");
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        alert(errorThrown);
    }

});

0

Almis 19 Июн 2016 в 15:49

Я внес эти изменения, но по-прежнему ничего не происходит. Модальное диалоговое окно не отображается

–

K. Mak

19 Июн 2016 в 15:45

Возможно, ваш ajax не работает, добавьте обратный вызов ошибки и проверьте наличие ошибок. Проверьте мою правку.

–

Almis

19 Июн 2016 в 15:48

показать модальное диалоговое окно подтверждения после отправки формы

3 ответа

Похожие вопросы

Новые вопросы

javascript