Как предупредить сообщение об успехе в модальной форме? - PullRequest
Новая
       9

Как предупредить сообщение об успехе в модальной форме?

1 голос
/ 19 сентября 2019

Я новичок в ajax / jquery.Я хочу использовать sweetalert на своем веб-сайте, я настроил его, как в учебнике, но когда я открываю модальную форму и нажимаю кнопку send, она переходит на другую страницу, страницу send.php.

Здесь моя форма: 

   <form  id="contactForm1" action="send.php" method="post">
      <div class="field-block">
        <label for="text">Message1</label>
      <textarea id="message1" class="field" required name="message1" rows="4" placeholder=""></textarea>
      </div>
<div class="field-block">
        <label for="text">Message2</label>
        <textarea id="message2" class="field" required name="message2" rows="4" placeholder=""></textarea>
      </div>
      <div class="field-block">
        <label for="text">Message3</label>
        <textarea id="message3" class="field" required name="message3" rows="4" placeholder=""></textarea>
      </div>

      <button id="button" class="button" type="submit">Отправить</button>
      <div class="result">
        <span id="answer"></span>
        <span id="loader"><img src="images/loader.gif" alt=""></span>
      </div>
    </form>

внутри этой формы подсластитель не работает, но вне формы он работает.

Вот подскажите jquery и ajax запрос: 

<script>

            $("#contactForm1").on('submit',function(event) {
                event.preventDefault(); // to prevent default page reloading
                var dataString = $(this).serialize(); // to get the form data

                $.ajax({
                    type: "POST",
                    url: "send.php",
                    data: dataString,
                    success: function(data){
                        $('#contactForm1')[0].reset(); // to reset form data
                    }
                }).done(function(data){
                    setTimeout(function () {
                        Swal.fire(
  'Thank you!',
  'Your request has been accepted!',

)
                    }, 2000);

                });

            });

</script>

в чем может быть проблема?Пожалуйста, помогите

Ответы [ 2 ]

3 голосов
/ 19 сентября 2019

Вы можете отправить его без запроса ajax, также попробуйте это изменение 

$('.button').click(function(){
на 
function submitForm(){
Ваша функция будет выглядеть следующим образом. 
function submitForm(){
        swal({
          title:"Red Stapler",
          text: "Are You Sure?",
          buttons: {
              cancel: true,
              confirm: "Submit"
          }
        });
}

Теперь в форме добавьте 

onsubmit="return submitForm();"
2 голосов
/ 19 сентября 2019

Проблема в том, что вы не отправляете запрос с помощью AJAX.

Решение:

Сначала удалите action="send.php" из формы

, затемдобавьте это в ваш скрипт. 

<script>
  $('.button').click(function(){
    swal({
     title:"Red Stapler",
     text: "Are You Sure?",
     buttons: {
            cancel: true,
            confirm: "Submit"
     }
    }).then((value) => { 
       <!-- When the user click submit send Ajax request -->
       $.ajax({
          url:    "send.php",
          method: "POST",
          data:{
            message1: $(#message1).val(),
            message2: $(#message2).val(),
            message3: $(#message3).val()
          },
          success: function(data)
          {
             // some actions
          }
       });
    });

  });
</script>
...