open bootstrap modal after php form submit

Question

I'm trying to submit my contact form, send the data in an email with PHP, stay on index.html and open a bootstrap modal with a "Thank you" message.

All the other examples I've seen that might do this have used AJAX. BUT I'd like to do it through PHP alone as my AJAX knowledge is non existent. Does anyone know if its even possible? and if so, how?

I've only included the last part that makes sure I return to index.html or displays the errors from the form submission

PHP from contact.php.

if(!$mail->Send()){
    echo "Message could not be sent.";
    echo "Mailer Error: " . $mail->ErrorInfo;
    exit;
}
print '<meta http-equiv="refresh" content="0; url=index.html" />';
echo "<script>$('#myModal').modal('show')</script>";

HTML

<form id='contactus' action='contact.php' enctype="multipart/form-data" method='post'>
<fieldset>
<legend>Contact us</legend>
<div class='container'>  
    <label for='email' >Name*:</label><br/>
    <input type="text" id="name" name="name" required /><br>
    <label for='email' >Phone*:</label><br/>
    <input type="text" id="phone" name="phone" required /><br>
    <label for='email' >Email*:</label><br/>
    <input type='text' name='email' id='email' required/><br/>
    <label for='message' >Message:</label><br/>
    <textarea rows="10" cols="50" name='message' id='message'></textarea>
        <!-- MAX_FILE_SIZE must precede the file input field -->
    <br>
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input id="file" name="image" type="file" />
    <input type='submit' name='Submit' value='Submit' />
</div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Thanks!</h4>
      </div>
      <div class="modal-body">
        <p>Thank you for your message!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

here: So if I get it right, on click of a button, you want to open up a modal that lists the values entered by the users followed by submitting it.

For this, you first change your input type="submit" to input type="button" and add data-toggle="modal" data-target="#confirm-submit" so that the modal gets triggered when you click on it:

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

Next, the modal dialog:

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

  <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="#" id="submit" class="btn btn-success success">Submit</a>
        </div>
    </div>
</div>

Lastly, a little bit of jQuery:

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').html($('#lastname').val());
     $('#fname').html($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});

You haven't specified what the function validateForm() does, but based on this you should restrict your form from being submitted. Or you can run that function on the form's button #submitBtn click and then load the modal after the validations have been checked. DEMO