如何以模式形式提醒成功消息？

Question

我是 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>

在此表单内 sweetalert 不起作用，但在表单外它有效。

这里是 sweetalert 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>

可能是什么问题？请帮助

Answer 1

问题是您没有使用 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>

Answer 2

您可以在没有 ajax 请求的情况下发送也可以尝试此更改

$('.button').click(function(){

到

function submitForm(){

您的函数将如下所示：

function submitForm(){
    swal({
        title:"Red Stapler",
        text: "Are You Sure?",
        buttons: {
            cancel: true,
            confirm: "Submit"
        }
    });
}

现在在表单中添加

onsubmit="return submitForm()"

Answer 3

swal({ title: "Done", text: "Record updated successfully!", type: "success" }, function () {location.reload();});

只需使用这行代码，它会自动隐藏警告并在单击“确定”时重新加载页面。

如何以模式形式提醒成功消息？

How to alert success message in modal form?

php

ajax

jquery

sweetalert