I have created the contact form using HTML and PHP. Also, the mail is coming correctly to mail id. But after the success message, it is redirecting to the form.php
getting the error in java script.
function sendEnquiryform(){
var fname=$('#fname').val();
var email=$('#email').val();
var pd=$('#pd').val();
var pg=$('#pg').val();
var ced=$('#ced').val();
var score=$('#score').val();
var message=$('#message').val();
$.post("mail.php",'fname='+name+'&email='+email' +'&pd='+pd' +'&pg='+pg' +'&ced='+ced' +'&score='+score'&message='+message,function(result,status,xhr) }
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
You could post the form to the same page and check for a success message there, like this.
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
...other html....
<div id="message"><?php if(isset($success)){ echo $message; } ?></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input name="name" required="required" placeholder="Your Name">
<input name="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
...other html....
Using the mail.php on the same page where the form is could do the magic. the following code did the magic.
<?php
$from = '';
$sendTo = 'email@email.com';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message');
$okMessage = 'Thank you for your message. I will write back soon.';
$errorMessage = 'There is an error while sending message. Please try again later.';
try {if (!empty($_POST)) {
$emailText = "You have a new message from your contact form\n=====\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
}
catch (\Exception $e) {
$responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
} else {
echo $responseArray['message'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
$(function () {
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<h1>CONTACT FORM</h1><hr>
<p class="lead">By filling out the contact form; You may have information about us and current news.</p>
<form id="contact-form" method="post" role="form" novalidate="true">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_name">Full Name *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please fill the name field *" required="required" data-error="You must fill the name field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_email">E-mail *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please fill the email field *" required="required" data-error="You must fill the email field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_subject">Subject *</label>
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please fill the subject field *" required="required" data-error="You must fill the subject field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Please fill the message field *" rows="4" required="required" data-error="You must fill the message field"></textarea>
<div class="help-block with-errors alert-danger"></div>
</div>
<input type="submit" class="btn btn-success btn-send" value="Submit">
<p class="text-muted" style="padding-top: 5px;"><strong>*</strong>This field must be fill.</p>
</div><!-- controls all end -->
</form><!-- form all end -->
</div><!-- col-xl-8 offset-xl-2 end -->
</div><!-- row all end -->
</div><!-- container all end -->
</body>
Please use this code
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
echo $success;
}
?>
try this way . try to send mail from an ajax . Please write your code like below
javascript
<script type="text/javascript">
function sendEnquiryform(){
var name=$('#name').val();
var email=$('#email').val();
var message=$('#message').val();
$.post("send_mail.php",'name='+name+'&email='+email'&message='+message,function(result,status,xhr) {
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
</script>
Your html
<form method="post" name="FrmEnquiry" id="FrmEnquiry" action="" onsubmit="sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>
send_mail.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
this will display your message in your page.Please try this. This is working fine in my case.