Html & Php Contact Form with Email Submission - php

Question

Db Connection
$server = 'localhost:8080';
$username = 'root';
$password = '';
$database = 'resort';
$connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.'error connecting to db');
//select database
mysqli_select_db ($database, $connect) or die(mysqli_error.'error selecting db');
if(!empty($_POST)){
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$filtered_email = filter_var($email, FILTER_VALIDATE_EMAIL);
if(!empty($name) && !empty($email) && !empty($message))
{
//insert the data into DB
mysql_query("INSERT into contactform (contact_id, contact_name, contact_email, contact_phone, message )
VALUES ('', '".$name."',
'".$email."', '".$phone."',
'".$message."' )") or die(mysqli_error());
//prepare email headers
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=isoo-8859-1\r\n";
$headers .= "From: ".$email."\r\n";
$to = 'mahesh.gulve004#gmail.com,'.$email;
$subject = 'Contact Form';
$body = 'From: <br/> Name: '.$name.' <br/>E-mail: '.$email.'<br/>Phone: '.$phone.'<br/>Message: '.$message;
//before sending the email make sure that the email address is correct
if ( $filtered_email == false ) {
echo json_encode(array(
'error' => true,
'msg' => "The email address entered it's not correct!"
));
exit;
}
$mail = mail($to, $subject, $body, $headers);
//finally send the email
if ( $mail ) {
//finally send the ajax response
echo json_encode(array(
'error' => false
));
exit;
} else {
//finally send the ajax response
echo json_encode(array(
'error' => true,
'msg' => "Opss...Something went wrong. Message was not sent!"
));
exit;
}
} else {
echo json_encode(array(
'error' => true,
'msg' => "You haven't completed all required fileds!"
));
exit;
}
}
$(function() {
//CONTACT FORM AJAX SUBMIT
$('#send').click(function() {
$.ajax({
url: 'mailer.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
console.log(data);
if (data.error === true) {
$('#error').css('display', 'block');
var error = document.getElementById('error');
error.innerHTML = data.msg;
setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
} else {
$('#note').show();
$('#error').hide();
$("#fields").hide();
}
}
});
return false;
});
});
<div class="col-md-6">
<div id="test-form" class="white-popup-block mfp-hide" style="width:400px;float:left;">
<div id="formcontent">
<div id="formheader" style="border-bottom:1px solid #e3e3e3;margin-bottom:20px;">
<h1 style="color:#37bc9b;font-size:33px;">We will get back to you...</h1>
</div>
<fieldset style="border:0;">
<div id="note">
<h2>Message sent successfully!</h2>
</div>
<div class="contact-form">
<form id="contactForm" method="post" action="">
<div class="form-group">
<label for="name">Name</label>
<span id="name-info" class="info">
<input type="text" placeholder="" id="name" name="name" class="form-control demoInputBox">
</div>
<div class="form-group">
<label for="email">Email</label>
<span id="email-info" class="info">
<input type="text" placeholder="" id="email" name="email" class="form-control demoInputBox">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<span id="phone-info" class="info">
<input type="text" id="phone" name="phone" class="form-control demoInputBox">
</div>
<div class="form-group">
<label for="message">Message</label>
<span id="message-info" class="info">
<textarea placeholder="" rows="5" id="message" name="message" class="form-control demoInputBox">
</textarea>
</div>
<input class="btn btn-info" id="send" type="submit" value="Submit"/>
</form>
</div>
</fieldset>
</div>
</div>
</div>
<div id="error"></div>
Issue is that when I click on submit the data is not submitted in fact I will say nothing happens by clicking submit button. Errors does not occur so no way to find out what the problem is. I am trying to build a contact form that can send mail. So you will also get some code related to it.

Answer 1

To submit the form you should use:
$('#contactForm').submit(function(){
//your ajax function
return false;
});

Answer 2

try $("#contactForm").serialize() instead of $(this).serialize()