i want to display two popups, one for error message and other for success message

Question

I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background. So, far i'm successful in executing the php file in background and show the model when user clicks on submit button. But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.

Here's my code :

  <!-- 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-->

Thank you.

Answer 1

You can use Jquery to achieve this. In you php you can have two variables before the validation like:

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

Now if the form is validated you can display the modal like this:

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

In the modal body you can display the message and color.

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

The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";

Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back. Also php script should come after you loaded the jquery.