We have two file name is index.php and data.php.In this blog we are learning how to send data by ajax and get json response. Our main purpose is to validate the field and sending the mail after validation the form
Step 1. We need to include jquey libraries here we have already added two jquery library<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
Hope you have included it !!!
Step2. Create Html Form
Step 3 Add Class="required" in text field which you want to make mandatory.
Example <input class="required" name="firstname">
Step4 : Use validate form function Example: var form = $( "#contactform" ); form.validate();
Step 5: Now Serialize the data using var Data=$(this).serialize();
Step 6: Send data by ajax;
Index.php
<html>
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
</head>
<body>
<div id="note"></div>
<form action="data.php" enctype="multipart/form-data" method="post" id="contactform">
<div class="form-group">
<input type="text" name="name" id="name" placeholder="Name" class="required" value="">
<div class="error" id ="nameerror" style="color:red"></div>
</div>
<div class="form-group">
<input type="text" name="email" id="email" placeholder="Email id" class="required email" value="">
<div class="error" style="color:red" id ="emailerror"></div>
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" placeholder="Phone Number" class="required number" value="">
<div class="error" id="phoneerror" style="color:red"></div>
</div>
<div class="form-group">
<textarea class="form-control required" name="message" rows="4" id="message" placeholder="Message"></textarea>
<div class="error" id ="messageerror"style="color:red"></div>
</div>
<div class="loading"></div>
<div id="formResponse"></div>
<div class="form-group">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$('#contactform').submit(function() {
var form = $( "#contactform" );
form.validate();
var check= form.valid();
if(check==true)
{
var Data=$(this).serialize();
var actUrl=$(this).attr('action');
$.ajax({
type:'post',
data:Data,
url:actUrl,
success:function(msg){
if(msg!="ok") {
var arr = JSON.parse(msg);
var name= arr['name'];
var phone= arr['phone'];
var email= arr['email'];
var message= arr['message'];
$("#nameerror").html(name);
$("#phoneerror").html(phone);
$("#emailerror").html(email);
$("#messageerror").html(message);
}else{ $("#note").html("Succesfully Sent"); }
}
}); return false;
} else { return false;}
}); });
</script>
data.php
In data.php file we have save the all the error message is one array ,then encode that array in Json.
<?php
<?php
$value=0;
$arrlist = array();
if($_POST['name']=="") {
$arrlist['name']="Name is required";
$value= 1;
}
if ($_POST['phone']=="") {
$arrlist['phone']="Phone is required";
$value= 1;
}else if (is_numeric( $_POST['phone'])) {
}else {
$arrlist['phone']="Phone must be Digit";
}
if ($_POST['email']=="") {
$arrlist['email']="Email is required";
$value= 1;
}else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) {
$validemail="valid email";
$value=0;
} else {
$arrlist['email']="Pleae Enter Valid Email is required";
$value= 1;
}
if ($_POST['message']=="") {
$arrlist['message']="Message is required";
$value=1;
}
if ($value!=1) {
$name= $_POST['name'];
$emailfrom= $_POST['email'];
$phone= $_POST['phone'];
$email_message= $_POST['message'];
$to = 'gauravrautela123@gmail.com';
$subject = 'Contact US';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers .= 'From: '.$emailfrom."\r\n".
'Reply-To: '.$emailfrom."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Compose a simple HTML email message
$message = '<html><body>';
$message .= '<table border="0" cellpadding="5">';
$message .= "<tr><td><strong>Name:</strong> </td><td>" . $name . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . $emailfrom . "</td></tr>";
$message .= "<tr><td><strong>Phone:</strong> </td><td>" . $phone . "</td></tr>";
$message .= "</table>";
$message .= '<table border="0" cellpadding="5">';
$message .= "<tr><td><strong>Message:</strong> </td></tr><tr></tr><td>" . strip_tags($email_message) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
mail($to,$subject,$message,$headers);
//////////////// Message Revert to Client ///////////////////////////////////////////////////////////////////////
$email_company="digital@gmail.com";
$receiver_email=$emailfrom;
$subject = 'Thank you for Contact us';
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers .= 'From: '.$email_company."\r\n".
'Reply-To: '.$email_company."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Compose a simple HTML email message
$message = '<html><body>';
$message .= '<table border="0" cellpadding="2">';
$message .= "<tr><td><strong>Hi,</strong>". $name . "</td></tr>";
$message .= '<table border="0" cellpadding="5">';
$message .= "<tr><td><strong>Thank you for contact us.We will revert you back soon.</strong> </td></tr>";
$message .= "</table>";
$message .= "</body></html>";
$resultmail= mail($receiver_email,$subject,$message,$headers);
if (!$resultmail) {
echo $result = '<div class="notification_error">'.$error.'</div>';
} else {
echo $result = "ok";
}
} else {
echo $result =json_encode($arrlist);
} ?>
No comments:
Post a Comment