Show modal after clicking submit en send mail - php

Question

My modal is not showing. the page is reloading and then i receive an email.
Below you can find my code. Can somebody help me out please... I think the problem is that my page is reloading after clicking the submit button.
Below my form that i use :
<form id="form" method="post" name="form" autocomplete="on">
<div class="row">
<div class="col-sm-6 nopadding-right">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-user"></span></div>
<input type="text" name="vname" placeholder="Name" class="form-control requiredField name" value="" />
</div>
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-phone"></span></div>
<input type="text" name="vphone" placeholder="Phone" class="form-control requiredField phone" value="" />
</div>
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-at"></span></div>
<input type="email" name="vmail" placeholder="Enter email" class="form-control requiredField email" value="" />
</div>
</div>
<div class="col-sm-6">
<div class="input-group mail-block">
<div class="input-group-addon"><span class="fa fa-pencil"></span></div><textarea class="form-control message" name="vtext" placeholder="Message" rows="4"></textarea><input class="btn btn-primary inverse-btn" id="send" name="confirm" type="submit" value="send">
</div>
</div>
</div>
</form>
The modal :
<div class="modal fade" id="Modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Thank you</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div></div>
My php code :
<?php if(isset($_POST["confirm"])){ if($_POST["vname"]==""||$_POST["vmail"]==""||$_POST["vphone"]==""||$_POST["vtext"]==""){
echo "error";}else{
$email=$_POST['vmail'];
$email =filter_var($email, FILTER_SANITIZE_EMAIL);
$email= filter_var($email, FILTER_VALIDATE_EMAIL);
if (!$email){
echo "error";
}
else{
$subject = "mail " . $_POST['vname'];
$message = $_POST['vtext'] . "\r\n" . ' phone ' . $_POST['vphone'] ."\r\n" . $_POST['vmail'];
$headers = 'From:'. "xxx#email.com" . "\r\n"; // Sender's Email
$headers .= 'Cc:'. "xxx#email.com" . "\r\n"; // Carbon copy to Sender
$message = wordwrap($message, 70);
mail("xxx.yy#xxx.com", $subject, $message, $headers);
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#Modal').modal('show');
});
</script>";
}
}
}?>

Answer 1

The remedy is to use AJAX call instead of form submission. It allows you to do better error handling as well.