I am trying to set up a mail form inside a bootstrap modal window with some JS validation (for antispam purposes). I want the window to stay open after the form has been submitted and display a success/error message there. Even though I'm not familiar with AJAX (I'm still a beginner developer), I have followed some tutorials and came up with a solution that seems to work visually (messages are displayed accordingly and the modal window does not close after submit), but either the form is not being sent (the site is on a production server, not hosted locally) or there's an error somewhere, because I am not receiving any email.
I can't spot where the error is. Can someone help me?
Here is my code.
HTML form
<div class="alert alert-success hidden" id="fSuccess"><?php echo $lang['fsuccess']; ?></div>
<div class="alert alert-danger hidden" id="fError"><?php echo $lang['ferror']; ?></div>
<form id="contactForm" name="contactForm" class="form-horizontal" role="form" method="post" action="form.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label"><?php echo $lang['lname']; ?></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="<?php echo $lang['pname']; ?>" value="" required="required">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label"><?php echo $lang['lemail']; ?></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="<?php echo $lang['pemail']; ?>" value="" required="required">
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label"><?php echo $lang['ltel']; ?></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="tel" name="tel" placeholder="1234567890" value="">
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label"><?php echo $lang['lmessage']; ?></label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" required="required"></textarea>
</div>
</div>
<div class="form-group">
<label for="captcha" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="captcha" placeholder="<?php echo $lang['phuman']; ?>">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" name="submit" id="submit" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-send red" aria-hidden="true"></span> <?php echo $lang['send']; ?></button>
</div>
</div>
</form>
Form.php
<?php
// mail form
// salvo le variabili
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$captcha = $_POST['captcha'];
$from = $name;
$to = 'hidden@yahoo.it';
$subject = 'Richiesta di contatto';
$body = "Da: $name\n E-Mail: $email\n Tel: $tel\n Messaggio:\n $message";
// ok, spediamo!
mail($to, $subject, $body, $from);
}
?>
External javascript file
$(function () {
$('#contactForm').on('submit',function (e) {
var captcha = document.forms["contactForm"]["captcha"].value;
if (captcha == null || captcha != "5") {
$("#fError").removeClass("hidden");
return false;
} else {
$.ajax({
type: 'POST',
url: 'form.php',
data: $('#contactForm').serialize(),
success: function () {
$('#contactForm').each(function(){
this.reset();
});
$("#fError").addClass("hidden");
$("#fSuccess").removeClass("hidden");
},
error: function(){
$("#fError").removeClass("hidden");
}
});
}
e.preventDefault();
});
});