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

Question

Я хочу поблагодарить посетителя с модальной благодарностью после отправки формы.

Я пробовал несколько решений, которые я нашел в Интернете. Большинство из них происходят из stackoverflow. Я видел некоторые ответы об AJAX, но я совершенно незнаком с этим.

HTML

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

PHP

$naam = $_POST['name'];
$email = $_POST['email'];
$telefoon = $_POST['tel'];
$onderwerp = $_POST['onderwerp'];
$bericht = nl2br($_POST['bericht']);
$to = "user@gmail.com";

$body = <<<EOD
<br><hr><br>

$naam <br>
$email <br>
$telefoon <br><br>

$bericht <br>

EOD;

$headers = "From: $email\r\n";

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

mail($to, $onderwerp, $body, $headers);
header('Location: index.html');
?>

Я также создал codepen

Существует ли какое-либо решение jQuery для отображения модального слова "спасибо" сразу после отправки формы?

Answer 1

Вы можете сделать это, используя echo.Ниже я использовал sweet alert.
Если вы хотите использовать bootstrap modal, вы можете заменить sweet alert на $('#modalId').show(modal).

Это должно быть ниже: index.php

<form class="border  p-3 bg-light rounded col-sm-10 form" method="POST" enctype="multipart/form-data">
  <div class="row justify-content-center">
    <h3 style="color:#2326b1;width: fit-content;border-radius:10px"> Get In Touch
    </h3><br>
  </div><br><br>
  <div class="form-group">
    <input type="text" class="form-control" name="name" id="inputPassword4" placeholder="Name" value="" required>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <input type="email" class="form-control" name="email" id="inputEmail4" placeholder="Email" value="" required>
    </div>
    <div class="form-group col-md-6">
      <input type="text" class="form-control" name="mobno" id="inputPassword1" placeholder="Contact Number" value="" required>
    </div>
  </div>
  <div class="form-group">
    <textarea class="form-control" name="sub" id="exampleFormControlTextarea1" rows="3" placeholder="message"></textarea>
  </div>
  <div class="row justify-content-center">
    <button type="submit" name="submit" class="btn btn-primary btn-md " style="background-color: #2326b1;padding:5px 10px;font-weight:700">SUBMIT</button>
  </div>
</form>
<?php include 
$msg = "";
use PHPMailer\PHPMailer\PHPMailer;
include_once "PHPMailer/PHPMailer.php";
include_once "PHPMailer/Exception.php";
include_once "PHPMailer/SMTP.php";
if (isset($_POST['submit']))
    {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $sub = $_POST['sub'];
    $mobno = $_POST['mobno'];
    $mail = new PHPMailer();
    $mail->isSMTP(); // Set mailer to use SMTP
    $mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
    $mail->SMTPAuth = true; // Enable SMTP authentication
    $mail->Username = ''; // SMTP username
    $mail->Password = ''; // SMTP password
    $mail->SMTPSecure = 'tls';
    $mail->Port = 587;
    $mail->addAddress('xyz@gmail.com', 'XYZ');
    $mail->setFrom('enquiry@gmail.com', 'Enquiry');
    $mail->Subject = "Enquiry";
    $mail->isHTML(true);
    $mail->Body = "Name : ";
    $mail->Body.= $name;
    $mail->Body.= "";
    $mail->Body.= "<br/>";
    $mail->Body.= "";
    $mail->Body.= "Mobile No : ";
    $mail->Body.= $mobno;
    $mail->Body.= "";
    $mail->Body.= "<br/>";
    $mail->Body.= "";
    $mail->Body.= "Message : ";
    $mail->Body.= $sub;
    $mail->Body.= "<br/>From : ";
    $mail->Body.= $email;

    if (!$mail->send())
        {
        echo 'Message could not be sent.';
        echo 'Mailer Error:' . $mail->ErrorInfo;
        }
      else
        {
        echo  '<script> swal("Thank you,'. $name .'.  We will get back to you shortly")</script>';
        }
    }
?>

Answer 2

если ваша форма работает с методом "POST", вы можете подождать в php для запроса POST и если пользователь отправляет форму.

пример

<?php if($_SERVER["REQUEST_METHOD"] == "POST"){ ?>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post">
                      <input name="input" placeholder="edit me">
                      <button name="submit" type="submit" value="edit">Submit</button>
                    </form>
                </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
              </div>
          </div>
      </div>
  </div>
<?php } ?>

, если пользователь отправил вашу форму, сервер покажет фрагмент HTML, и пользователь получит модальное значение.Нам нужна дополнительная информация для идеального ответа.

// edit

Вам нужно разместить фрагмент на этом сайте "send-mail.php"