提交後保持引導模式打開

我使用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; 
?>

任何幫助將不勝感激。在此先感謝。

來源

2017-06-29 Meek

是所有代碼php，html，jquery代碼在同一個文件中？ –

您需要通過ajax發佈數據，而不是像您當前所做的那樣提交表單。使用您提供的鏈接中的代碼：https://www.codexworld.com/bootstrap-modal-popup-form-submit-jquery-ajax-php。 'sendmail'代碼需要與前端代碼不同的網頁。流程如下：模式彈出窗口調用一些javascript，javascript對後端sendmail服務進行ajax調用，後端服務以成功或錯誤消息回覆 –

@PankajMakwana html位於一個文件中，php位於另一個文件中。 – Meek

請用下面的代碼代替。評論答案如果不工作

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

來源

2017-06-29 11:30:19

它仍然關閉模式。 – Meek

你想保持價值，因爲它是在表單提交後？ –

我想在成功提交表單後清除表單域。 – Meek

提交後保持引導模式打開

回答

相關問題