提交后保持引导模式打开

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; ?>