提交后保持 Bootstrap 模式打开

Question

我正在使用Bootstrap 4 modal 来显示联系表格。 问题是当提交按钮被点击时，表单关闭。当我手动重新打开模式时，验证检查会起作用并显示，但是即使在提交表单后如何保持它打开？ Like in this example - click on View demo.

据我所知，我需要使用 ajax 来解决此问题，但是如何转换我的代码（保持 reCaptcha 检查等）以使用 ajax？

HTML：

 <?php
  include('sendmail.php');
  ?> 
 <!-- Form modal -->
  <div class="modal fade" id="response" tabindex="-1" role="dialog" aria-labelledby="responseLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="responseLabel">Contact</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 action="#send-message" method="POST" id="sendmail" class="row" id="send-message">
            <div class="col-md-4 mb-3">
              <input type="text" class="form-control" value="<?php echo !empty($contact_name)?$contact_name:''; ?>" placeholder="Name" name="contact_name" required>
            </div>
            <div class="col-md-4 mb-3">
              <input type="email" class="form-control" value="<?php echo !empty($email)?$email:''; ?>" placeholder="E-mail address" name="email" required>
            </div>
            <div class="col-md-4 mb-3">
              <input type="phone" class="form-control" value="<?php echo !empty($email)?$email:''; ?>" placeholder="Phone" name="phone">
            </div>
            <div class="col-md-12 my-3 mt-md-0">
              <textarea type="text" class="form-control" rows="7" placeholder="Message" required name="message"><?php echo !empty($message)?$message: ''; ?></textarea>
            </div>
            <div class="col-sm-10 col-sm-offset-2 captcha-box">
              <div class="g-recaptcha" data-theme="light" data-sitekey="xxxx"> </div>
            </div>
            <div class="col-sm-12 mt-3">
              <button class="btn btn-primary float-left" type="submit" name="submit">Send</button>
              <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Luk</button>
            </div>
          </form>
          <?php if(!empty($succMsg)): ?>
          <div class="alert alert-success" role="alert">
              <?php echo $succMsg; ?>
          </div>
          <?php endif; ?>
          <?php if(!empty($errMsg)): ?>
          <div class="alert alert-danger" role="alert">
            <?php echo $errMsg; ?>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
  <!-- Form end -->

sendmail.php:

<?php
function test_input($data)
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}
if (isset($_POST['submit'])):
    if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
        $secret         = 'xxxxxxxxxx';
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']);
        $responseData   = json_decode($verifyResponse);
        $contact_name   = !empty($_POST['contact_name']) ? $_POST['contact_name'] : '';
        $contact_name   = test_input($contact_name);
        $email          = !empty($_POST['email']) ? $_POST['email'] : '';
        $email          = test_input($email);
        $phone          = !empty($_POST['phone']) ? $_POST['phone'] : '';
        $phone          = test_input($phone);
        $message        = !empty($_POST['message']) ? $_POST['message'] : '';
        if (preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)): //make sure the email address is valid
            $email = $email;
            if ($responseData->success):
            //contact form submission code
                $to          = 'e-mail address';
                $subject     = 'Contact form';
                $htmlContent = "
                                <p><b>Name: </b>" . $contact_name . "</p>
                                <p><b>Phone.: </b>" . $phone . "</p>
                                <p><b>E-mail: </b>" . $email . "</p>
                                <p><b>Message: </b>" . $message . "</p>";
                //set content-type for sending HTML email
                $headers = "MIME-Version: 1.0" . "\r\n";
                $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
                $headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
                $headers .= 'From:' . $contact_name . ' <' . $email . '>' . "\r\n";
                //$headers .= 'Cc:' . $contact_name . ' <' . $email . '>' . "\r\n";
                $headers .= 'Reply-To:'  . $contact_name . ' <' . $email . '>' . "\r\n";
                //send email
                @mail($to, $subject, $htmlContent, $headers);
                $succMsg      = 'Thanks for your message.';
                $contact_name = '';
                $phone        = '';
                $email        = '';
                $message      = '';
            else:
                $errMsg = 'Invalid captcha.';
            endif;
        else:
            $errMsg = 'Invalid e-mail address';
        endif;
    else: //re-display content if error
        $contact_name = $_POST['contact_name'];
        $phone       = $_POST['phone'];
        $email        = $_POST['email'];
        $message      = $_POST['message'];
        $errMsg       = 'Please fill out captcha".';
    endif;
else: // Reset fields
    $errMsg       = '';
    $succMsg      = '';
    $contact_name = '';
    $email        = '';
    $phone        = '';
    $message      = '';
endif;
?>

任何帮助将不胜感激。 提前致谢。

Answer 1

请用您的代码替换下面的代码。如果不起作用，请评论答案

<?php
  include('sendmail.php');
?> 
<!-- you can show popup here-->
<?php if(!empty($succMsg)): ?>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#response").modal("show");
    });
    </script>
<?php endif; ?>