我想顯示兩個彈出窗口，一個用於錯誤消息，另一個用於成功消息

Question

我是模態新手，我想提交一個表單，然后在驗證用戶表單后顯示成功彈出窗口，否則想顯示錯誤彈出窗口。 我也應該執行php文件，以便在后台向用戶發送電子郵件。 因此，到目前為止，我已經成功地在后台執行了php文件，並在用戶單擊“提交”按鈕時顯示了模型。 但是我希望彈出窗口在表單驗證時顯示。 我也想使用type =“ submit”而不是type =“ button”進行表單提交。

這是我的代碼：

  <!-- javascript code to execute php file --> <script type="text/javascript"> function executePhp() { $.post("sendmail.php"); return false; } </script> <!-- javascript code ends --> 

  <form class="well" action="" method=""> <div class="form-group col-md-6"> <label for="inputPassword4">Full Name</label> <input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Phone Number</label> <input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Email</label> <input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email"> </div> </div> <button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;" data-toggle="modal" data-target="#myModal">Check</button> </form> <!-- Code for popup --> <!-- Modal --> <div class="modal fade mymodal" id="myModal" role="dialog"> <div class="modal-dialog mydialog"> <!-- Modal content--> <div class="modal-content mycontent"> <div class="modal-header myheader"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h3 class="modal-title">Message</h3> </div> <div class="modal-body mybody"> <br> <br> <h3>Thanks for choosing</h3> <h4> Your details will arive by email. Sit back, we'll get back to you soon. </h4> <br> <br> </div> <div class="modal-footer myfooter"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Code for popup end--> 

謝謝。

Answer 1

您可以使用Jquery實現此目的。 在您的php中，驗證之前可以有兩個變量，例如：

$popup_message = "";
$popup_message_color = "";

現在，如果表單通過驗證，則可以顯示如下形式：

  $popup_message = "login successfully.";
  $popup_message_color = "success";
    //Open Modal
    echo "<script type='text/javascript'>
    $(document).ready(function(){
    $('#myModal').modal('show');
    });
    </script>";

在模態主體中，您可以顯示消息和顏色。

<div class="modal-body">
    <p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>

如果驗證失敗，將執行相同的操作，只需將您的消息和顏色更改為$popup_message_color = "danger";

注意如果您正在驗證另一個頁面，則模式應該在該頁面中，然后將關閉按鈕更改為鏈接以返回。 加載了jquery之后，php腳本也應該出現。