提交表格后显示模态

时间:2019-07-11 22:06:46

标签: php bootstrap-4 form-submit pop-up

在提交表单后,我想以感谢的方式感谢访问者。

我尝试了几种在互联网上找到的解决方案。它们大多数来自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解决方案用于显示“谢谢”模式?

2 个答案:

答案 0 :(得分:0)

如果您的表单使用“ 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代码段,并且用户获取了模式信息。我们需要更多信息才能找到最佳答案。

//编辑

您需要将代码段放置在此站点“ send-mail.php”上

答案 1 :(得分:0)

您可以使用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>';
        }
    }
?>
相关问题