Bootstrap Modal not opening on form submit - php

Question

<div class="col-lg-10 col-lg-offset-1 text-center">
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
<div class="col-md-4">
<label></label>
<input name="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="col-md-4">
<label></label>
<input name="email" type="text" class="form-control" placeholder="Email">
</div>
<div class="col-md-4">
<label></label>
<input name="subject" type="text" class="form-control" placeholder="Subject">
</div>
<div class="col-md-12">
<label></label>
<textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
</div>
<div class="col-md-4 col-md-offset-4">
<label></label>
<button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
</div>
</form>
</div>
</div>
</div>
</section>
<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<h2 class="text-center">Submitted sucessfully!</h2>
<p class="text-center">You clicked the button</p>
<br/>
<button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
</div>
</div>
</div>
</div>
<?php
$headers = ''; // added this line
$headers. = "MIME-Version: 1.0\r\n";
$headers. = "Content-type: text/html\r\n";
$headers = 'From: $name'.
"\r\n". // added .= instead of =
'X-Mailer: PHP/'.phpversion();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: '.$email;
$to = 'random#gmail.com';
$subject = $_POST['subject'];
$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";
if (isset($_POST['submit'])) {
/* Anything that goes in here is only performed if the form is submitted */
if (mail('random#gmail.com', $subject, $body, $from)) {
echo "<script type='text/javascript'>$(document).ready(function(){ $('#alertModal').modal('show');});</script>";
} else {
echo "something went wrong";
}
} ?>
I have been trying to call my modal when submitting my form, but cannot seem to get it to work.
I have been looking at various different questions but nothing seems to work.
I do not have JS for this and my PHP is incorporated on a separate page.
Please help, I want the modal to open on the same page as the form when someone submits the info.
Thanks

Answer 1

See , it is working
function showModal(){
$('#alertModal').modal('show');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-10 col-lg-offset-1 text-center">
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
<div class="col-md-4">
<label></label>
<input name="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="col-md-4">
<label></label>
<input name="email" type="text" class="form-control" placeholder="Email">
</div>
<div class="col-md-4">
<label></label>
<input name="subject" type="text" class="form-control" placeholder="Subject">
</div>
<div class="col-md-12">
<label></label>
<textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
</div>
<div class="col-md-4 col-md-offset-4">
<label></label>
<button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
</div>
</form>
</div>
</div>
</div>
</section>
<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<h2 class="text-center">Submitted sucessfully!</h2>
<p class="text-center">You clicked the button</p>
<br/>
<button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
</div>
</div>
</div>
</div>
<?php
$headers = ''; // added this line
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = 'From: $name' . "\r\n" . // added .= instead of =
'X-Mailer: PHP/' . phpversion();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: ' . $email;
$to = 'random#gmail.com';
$subject = $_POST['subject'];
$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";
if (isset($_POST['submit']))
{
/* Anything that goes in here is only performed if the form is submitted */
if (mail ('random#gmail.com', $subject, $body, $from ))
{
echo "<script type='text/javascript'>showModal();</script>";
} else
{
echo "something went wrong";
}
}
?>

Answer 2

you have two choice
change button type:
<button type="button" class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
call function:
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row" onSubmit="show_modal();return;">
and the function:
function show_modal(){
$('#myModal').modal('show');
}
UPDATE (requested in comments)
Set timer for submit form after delay:
Change button type to button: type="button"
add this code to your page:
$("#submit").click(function(){
setTimeout(function() {
$("form").submit();
}, 5000); // 5 sec
$("#myModal").show(); //Find your modal id and replace with myModal
});
Note: don't forget to include jquery lib