I have created a simple email form on a website - Processing it through AJAX using the jQuery library.
I know that the form is working because I am receiving the test email, but I will need for the user to know that their email has sent. Currently, there is no event happening upon success. It should be replacing the form (in div #contactform) with a success message. What am I missing here?
NOTE: I looked at the activity in Safari after submitting the form and it shows my process.php script, but it says "cancelled". Why is it doing this, and could it have something to do with why it is not showing a success message?
Here's my script:
HTML
<div id="contactform">
<form id="churchcontact" action="" method="POST">
<ul>
<li>
<label for="name">Name</label>
<span class="error error_name">Please enter your name</span>
<input id="name" type="text" name="name" />
</li>
<li>
<label for="email">Email</label>
<span class="error error_email">Please enter your email address</span>
<input id="email" type="text" name="email" />
</li>
<li>
<label for="message">Message</label>
<span class="error error_message">Please write a message</span>
<textarea id="message" name="message"></textarea>
</li>
<li>
<input class="formsubmit" type="submit" value="Send" />
<li>
</ul>
</form>
</div>
jQUERY
$(document).ready(function() {
////////////////////////////////////
//// form submit ////
////////////////////////////////////
$('#churchcontact').submit(function() {
////////////////////////////////////
//// validation ////
////////////////////////////////////
$('.error').hide();
//message
var message = $('textarea#message').val();
if(message == '') {
$('.error_message').show();
$('textarea#message').focus();
var errors = 'true';
}
//email
var email = $('input#email').val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email == '') {
$('.error_email').show();
$('input#email').focus();
var errors = 'true';
}
//name
var name = $('input#name').val();
if(name == '') {
$('.error_name').show();
$('input#name').focus();
var errors = 'true';
}
if(errors) {
return false;
} else {
////////////////////////////////////
//// process ////
////////////////////////////////////
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "sites/all/modules/custom/churchcontact/process.php",
data: dataString,
success: function() {
$('#contactform').html("success!");
}
});
}
return false;
});
});
PHP (process.php)
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['message'];
$recipient = '[my email]';
$subject = 'Website Test';
$message = '
Name: ' . $name
. ', Email: ' . $email
. ', Message: ' . $msg;
mail($recipient, $subject, $message, $headers);
in process.php add an echo of mail():
$res = mail($recipient, $subject, $message, $headers);
echo $res; //if $res returns 1 that means mail was sent
ajax success:
...
success: function(data) {
if(data == 1){
message = "success!";
}
else{
message = "Error";
}
$('#contactform').empty().html(message);
}
Related
Project structure is as follows
C:\xampp\htdocs\myProject\Documentation
C:\xampp\htdocs\myProject\HTML\css
C:\xampp\htdocs\myProject\HTML\images
C:\xampp\htdocs\myProject\HTML\js
C:\xampp\htdocs\myProject\HTML\videos
C:\xampp\htdocs\myProject\HTML\404.html
C:\xampp\htdocs\myProject\HTML\contact.php
C:\xampp\htdocs\myProject\HTML\index.html
C:\xampp\htdocs\myProject\PSD
I have a contact form in index.html that is controlled by a javascript file. This code stops default form submit, performs error checks and then uses ajax to make a post request to contact.php. The javascript code runs, it detects the php (see the alert in the code below just after the axjax funtion call. The value of d is the php script in the alert, but none of the debug lines in the php code get called and it never returns 'success'.
Here is the form
<form class="form-horizontal" id="phpcontactform">
<div class="control-group">
<input class="input-block-level" type="text" placeholder="Full Name" name="name" id="name">
</div>
<div class="control-group">
<input class="input-block-level" type="email" placeholder="Email ID" name="email" id="email">
</div>
<div class="control-group">
<input class="input-block-level" type="text" placeholder="Mobile Number" name="mobile" id="mobile">
</div>
<div class="control-group">
<textarea class="input-block-level" rows="10" name="message" placeholder="Your Message" id="message"></textarea>
</div>
<div class="control-group">
<p>
<input class="btn btn-danger btn-large" type="submit" value="Send Message">
</p>
<span class="loading"></span> </div>
</form>
here is the javascript
// JavaScript Document
$(document).ready(function() {
$("#phpcontactform").submit(function(e) {
e.preventDefault();
var name = $("#name");
var email = $("#email");
var mobile = $("#mobile");
var msg = $("#message");
var flag = false;
if (name.val() == "") {
name.closest(".control-group").addClass("error");
name.focus();
flag = false;
return false;
} else {
name.closest(".control-group").removeClass("error").addClass("success");
} if (email.val() == "") {
email.closest(".control-group").addClass("error");
email.focus();
flag = false;
return false;
} else {
email.closest(".control-group").removeClass("error").addClass("success");
} if (msg.val() == "") {
msg.closest(".control-group").addClass("error");
msg.focus();
flag = false;
return false;
} else {
msg.closest(".control-group").removeClass("error").addClass("success");
flag = true;
}
var dataString = "name=" + name.val() + "&email=" + email.val() + "&mobile=" + mobile.val() + "&msg=" + msg.val();
$(".loading").fadeIn("slow").html("Loading...");
$.ajax({
type: "POST",
data: dataString,
url: "http://localhost/myProject/HTML/contact.php",
cache: false,
success: function (d) {
alert("d: "+d);
$(".control-group").removeClass("success");
if(d == 'success') // Message Sent? Show the 'Thank You' message and hide the form
$('.loading').fadeIn('slow').html('<font color="green">Mail sent Successfully.</font>').delay(3000).fadeOut('slow');
else
$('.loading').fadeIn('slow').html('<font color="red">Mail not sent.</font>').delay(3000).fadeOut('slow');
}
});
return false;
});
$("#reset").click(function () {
$(".control-group").removeClass("success").removeClass("error");
});
})
And finally here is the php
<?php
echo "<script>console.log('Debug Objects:' );</script>";
$name = $_REQUEST["name"];
$email = $_REQUEST["email"];
$mobile = $_REQUEST["mobile"];
$msg = $_REQUEST["msg"];
echo "<script>";
echo "alert('this also works');";
echo "</script>";
$to = "myemail#gmail.com";
if (isset($email) && isset($name) && isset($msg)) {
$subject = $name."sent you a message via Raaga";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= "From: ".$name." <".$email.">\r\n"."Reply-To: ".$email."\r\n" ;
$msg = "From: ".$name."<br/> Email: ".$email ."<br/> Mobile: ".$mobile." <br/>Message: ".$msg;
echo "<script>alert('this maybe works');</script>";
$mail = mail($to, $subject, $msg, $headers);
if($mail)
{
echo 'success';
}
else
{
echo "<script>alert('name:'+$name);</script>";
echo 'failed';
}
}
echo "<script>alert('this finally works');</script>";
?>
I tried moving contact.php to the htdocs root but that didnt work. Have turned off all antivirus and firewalls but that didnt work either. Am at a loss. Thought php was supposed to work out of the box with xampp?
Okay so thanks to ADyson for the help. The issue was not that php isn't running, its that the mail server was not properly configured.
i have this code on server 1
$("#send-mail").click(function () {
var name = $('input#name').val(); // get the value of the input field
var error = false;
if (name == "" || name == " ") {
$('#err-name').show(500);
$('#err-name').delay(4000);
$('#err-name').animate({
height: 'toggle'
}, 500, function () {
// Animation complete.
});
error = true; // change the error state to true
}
var emailCompare = /^([a-z0-9_.-]+)#([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
var email = $('input#email').val().toLowerCase(); // get the value of the input field
if (email == "" || email == " " || !emailCompare.test(email)) {
$('#err-email').show(500);
$('#err-email').delay(4000);
$('#err-email').animate({
height: 'toggle'
}, 500, function () {
// Animation complete.
});
error = true; // change the error state to true
}
var comment = $('textarea#comment').val(); // get the value of the input field
if (comment == "" || comment == " ") {
$('#err-comment').show(500);
$('#err-comment').delay(4000);
$('#err-comment').animate({
height: 'toggle'
}, 500, function () {
// Animation complete.
});
error = true; // change the error state to true
}
if (error == false) {
var dataString = $('#contact-form').serialize(); // Collect data from form
$.ajax({
url: $('#contact-form').attr('action'),
type: "POST",
data: dataString,
timeout: 6000,
error: function (request, error) {
},
success: function (response) {
response = $.parseJSON(response);
if (response.success) {
$('#successSend').show();
$("#name").val('');
$("#email").val('');
$("#comment").val('');
} else {
$('#errorSend').show();
}
}
});
return false;
}
return false; // stops user browser being directed to the php file
});
then i have this other code on server 2
<?php
include 'functions.php';
if (!empty($_POST)){
$data['success'] = true;
$_POST = multiDimensionalArrayMap('cleanEvilTags', $_POST);
$_POST = multiDimensionalArrayMap('cleanData', $_POST);
//your email adress
$emailTo ="****#hotmail.com"; //"yourmail#yoursite.com";
//from email adress
$emailFrom ="contact#yoursite.com"; //"contact#yoursite.com";
//email subject
$emailSubject = "contacto teklife";
$name = $_POST["name"];
$email = $_POST["email"];
$comment = $_POST["comment"];
if($name == "")
$data['success'] = false;
if (!preg_match("/^[_\.0-9a-zA-Z-]+#([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email))
$data['success'] = false;
if($comment == "")
$data['success'] = false;
if($data['success'] == true){
$message = "NAME: $name<br>
EMAIL: $email<br>
COMMENT: $comment";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html; charset=utf-8" . "\r\n";
$headers = 'From: TEKLIFE <jsparrow#blackpearl.com>' . PHP_EOL .
$headers .= "Reply-to: <$email>".
'X-Mailer: PHP/' . phpversion();
mail($emailTo, $emailSubject, $message, $headers);
$data['success'] = true;
echo json_encode($data);
}
}
and this is the code of the contact form on server 1
<div id="successSend" class="alert alert-success invisible">
<strong>Well done!</strong>Your message has been sent.</div>
<div id="errorSend" class="alert alert-error invisible">There was an error.</div>
<form id="contact-form" method="post" action="http://guara.webposicionamientoweb.com.mx/pluton/php/mail.php">
<div class="control-group">
<div class="controls">
<input class="span12" type="text" id="name" name="name" placeholder="* Your name..." />
<div class="error left-align" id="err-name">Please enter name.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="span12" type="email" name="email" id="email" placeholder="* Your email..." />
<div class="error left-align" id="err-email">Please enter valid email adress.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<textarea class="span12" name="comment" id="comment" placeholder="* Comments..."></textarea>
<div class="error left-align" id="err-comment">Please enter your comment.</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="send-mail" class="message-btn">Send message</button>
</div>
</div>
</form>
as you seen i send the post datas to other server,, if i click send on the contact form nothing happens...but the email is send ok... so i need the response so when i click send... the contact form fields are cleared... and the text appears ...message has been sent..
im complete newbee on this codes .. so some help are welcome¡¡
I ran your code through a jsfiddle.
And I got this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://guara.webposicionamientoweb.com.mx/pluton/php/mail.php. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
In your server code, try adding:
header("Access-Control-Allow-Origin: *");
or replace * with your HTML's domain. This should allow the request to pass through.
Allright, so I am pretty new to PHP so I thought I would ask you guys what I am doing wrong. I am currently developing a website were you can contact the company through this e-mail form.
However, for some reason the email won't be delivered. I have tried multiple e-mails (and played a little with the code) and it just won't work.
Here is the mail.php script:
<?php
if ($_POST) {
$name = $_POST['name'];
$email = $_POST['email'];
$text = $_POST['text'];
//send email
mail("myemail#gmail.com", "email enquiry", $text, "From:" . $email);
}
?>
Here is the snippet about the form from my script.js:
//Contact Form Code:
$(function (e) {
$(".form-button").click(function (e) {
var $error = 0;
var name = $("#form-name").val();
var email = $("#form-email").val();
var text = $("#form-msg").val();
var security = $("#form-security").val();
if(name == "" || email=="" || text=="" ){
$('#details-error-wrap').fadeIn(1000);
$error = 1;
}else{
$('#details-error-wrap').fadeOut(1000);
}
if(security != 8 ){
$('#security-error-wrap').fadeIn(1000);
$error = 1;
}else{
$('#security-error-wrap').fadeOut(1000);
}
if( /(.+)#(.+){2,}\.(.+){2,}/.test(email) ){
} else {
$('#details-error-wrap').fadeIn(1000);
$error = 1;
}
var dataString = 'name=' + name + '&email=' + email + '&text=' + text;
if($error == 0){
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function () {
$('#details-error-wrap').fadeOut(1000);
$('#security-error-wrap').fadeOut(1000);
$('#form-sent').fadeIn(1000);
}
});
return false;
}
e.preventDefault();
});
});
});
And lastly, here is the HTML:
<div class="seven columns">
<div id="form-sent" class="hide">
<div class="alert-box success">Message sent: Thankyou for your enquiry</div>
</div>
<form id="contact-form">
<label>Name *</label>
<input id="form-name" type="text"/>
<label>Email *</label>
<input id="form-email" type="text" />
<label>Message *</label>
<textarea id="form-msg"></textarea>
<div id="details-error-wrap" class="hide">
<div class="alert-box alert error-box">Error: Please ensure all fields are filled in correctly</div>
</div>
<label>Security Question *</label>
<input id="form-security" type="text" placeholder="7 + 1 = ?" />
<div id="security-error-wrap" class="hide">
<div class="alert-box alert error-box">Error: Security question is incorrect</div>
</div>
<input type="submit" value="Submit" class="form-button right" />
</form>
</div>
</div>
I posted all three related things. Parts of this website is from a template I'm using, so if you think the problem is in a different file just let me know.
Thanks in advance, I hope someone is able to help me :)
Firstly, it might be ending up in your SPAM folder.
Are you sending the email using your personal email address? Such as me#gmail.com?
If so, that's obviously not going to work, you need to setup SMTP in order for the emails to get passed the firewalls and to actually make it to the inbox.
Might want to format your script better, also, use an IF statement to see if the email is actually being sent by the PHP:
$to = 'myemail#gmail.com'; //Change this to the email you're using
$subject = 'Website Contact Form';
$headers = "From: " . "Me!! <myemail#gmail.com>" . "\r\n"; //This too
$content = "Hey!";
if (mail($to, $subject, $content, $headers)) {
echo "Success! Email was sent - Yay!";
} else {
echo "Error sending Email! booo!";
}
I am having trouble getting the email to send which I am sure it is because of the php but here is the js ajax also..it shows my error messages for form fields that are not filled out correctly and then it shows my processing bar once submitted but I get my error message after submission..any help would be appreciated.
html
<form method="post" action="feedback.php" id="contactform">
<fieldset class="first">
<div id="response"></div>
<div id="name_input">
<input id="name" name="name" placeholder="Name" class="required" type="text" maxlength="128" />
</div>
<div id="email_input">
<input id="email" name="name" placeholder="Email" class="required" type="text" maxlength="128" />
</div>
<div id="budget_input">
<label for="budget">Budget</label>
<select id="mydropdown">
<option value="none" selected=“”> -- choose one --</option>
<option value="firstchoice">$0 - $1,000</option>
<option value="secondchoice">$1,000 - $2,000</option>
<option value="thirdchoice">$3,000 +</option>
</select>
</div>
<div id="button">
<input type="submit" class="button" name="Submit" value="" />
</div>
</fieldset>
</form>
Updated:
<?php
$name = trim(stripslashes(htmlspecialchars($_POST['name'])));
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$mydropdown = trim(stripslashes(htmlspecialchars($_POST['mydropdown'])));
$recipient = "blake.harrison1#cox.net";
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
if ($honeypot == 'http://' && empty($humancheck)) {
//Validate data and return success or error message
$error_message = '';
$reg_exp = "/^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";
if (!preg_match($reg_exp, $email)) {
$error_message .= "<p>A valid email address is required.</p>";
}
if (empty($name)) {
$error_message .= "<p>Please provide your name.</p>";
}
if (empty($mydropdown)) {
$error_message .= "<p>Please select an item from the list.</p>";
}
if (!empty($error_message)) {
$return['error'] = true;
$return['msg'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>".$error_message;
echo json_encode($return);
exit();
} else {
//send to an email
$emailSubject = 'Top Contact Form';
$webMaster = 'blake.harrison1#cox.net';
$body="
<br><hr><br>
<strong>Name:</stong> $name <br>
<br>
<strong>Email:</stong> $email <br>
<br>
<strong>Budget:</strong> $mydropdown <br>
<br>
";
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
//send email and return to user
if(mail($webMaster, $emailSubject, $body, $headers)) {
$return['error'] = false;
$return['msg'] = "<p>Message sent successfully. Thank you for your interest " .$name .".</p>";
echo json_encode($return);
}
}
} else {
$return['error'] = true;
$return['msg'] = "<h3>Oops! There was a problem with your submission. Please try again.</h3>";
echo json_encode($return);
}
?>
$(document).ready(function() {
$('form #response').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var required = ' is required.';
var name = $('form #name').val();
var email = $('form #email').val();
var mydropdown = $('form #mydropdown').val();
var honeypot = $('form #honeypot').val();
var humancheck = $('form #humancheck').val();
// perform error checking
if (name == '' || name.length <= 2) {
valid = '<p>Your name' + required +'</p>';
}
if (!email.match(/^([a-z0-9._-]+#[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>Your email' + required +'</p>';
}
if (mydropdown == '') {
valid += '<p>An item from the list' + required +'</p>';
}
if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
}
if (humancheck != '') {
valid += '<p>A human user' + required + '</p>';
}
// let the user know if there are erros with the form
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast');
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('slow');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'send.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 12000,
success: function(data) {
$('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout("$('form #response').fadeOut('fast')", 12000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<p>There was an<strong> ' + errorThrown +
'</strong> error due to a<strong> ' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
can you try $.post instead of $.ajax
$.post(url, {argument_name: value, ...} , function(data){
// callback function..
}, 'json'}
do this with the php page...
sleep(2);
//Sanitize incoming data and store in variable
$name = trim(stripslashes(htmlspecialchars($_POST['name'])));
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$message = trim(stripslashes(htmlspecialchars($_POST['message'])));
$recipient = "info#internetmarketingtrio.com";
//Validate data and return success or error message
$errors = array();
$reg_exp = "/^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";
if (!preg_match($reg_exp, $email)) {
$errors[] = "<p>A valid email address is required.</p>";
}
if (empty($name) || $name == '') {
$errors[] = "<p>Please provide your name.</p>";
}
if (empty($message) || $message == '') {
$errors[] = "<p>A message is required.</p>";
}
if(empty($errors)) {
$return['success'] = true;
$return['message'] = "<p>Thanks for your feedback " .$name. ".</p>";
} else {
$return['success'] = false;
$return['message'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>";
foreach($errors as $error) {
$return['message'] .= $error ."<br />";
}
}
And then in your call to get this page... the ajax call...
$.ajax({
type: 'POST',
url: 'feedback.php',
data: formData,
dataType: 'json',
cache: false,
success: function(data) {
if(data.success) {
$("form#response").removeClass().addClass('success').html(data.message).fadeIn('fast');
removeResponse(5000);
} else {
$("form#response").removeClass().addClass('error').html(data.message).fadeIn('fast');
}
}
});
function removeResponse(time) {
setTimeout(function() {
$("form#response").fadeOut('fast');
}, time);
}
And that should do ya
adding this to the bottom of my php ended up fixing my issue if anyone reads this
$emailSubject = 'Contact Form';
$webMaster = 'blake.harrison1#cox.net';
$body="
<br><hr><br>
<strong>Name:</stong> $name <br>
<br>
<strong>Email:</stong> $email <br>
<br>
<strong>Message:</stong> $message
";
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
//send email and return to user
if(mail($webMaster, $emailSubject, $body, $headers)) {
$return['error'] = false;
$return['msg'] = "<p>Message sent successfully. Thank you for your intrest " .$name .".</p>";
echo json_encode($return);
}
}
} else {
$return['error'] = true;
$return['msg'] = "<h3>Oops! There was a problem with your submission. Please try again.</h3>";
echo json_encode($return);
}
?>
I have a contact form > www.bgv.co.za/testspace/contact_3.php
it uses jquery validate and PHP. I have some add/ remove class bits to hide or reveal a Thank you title and some php if isset to echo back the successful form submission inputs.
My problem is that on submission you see the thank you page but the div> sadhu is not showing the data that the user input... infact its not displaying as a div - please help
Here is my Jquery:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
submitHandler: function(form) {
$('h1.success_').removeClass('success_').addClass('success_form');
$("#content").empty();
$("#content").append('#sadhu');
$('#contactform').hide();
var usr = document.getElementById('contactname').value;
var eml = document.getElementById('email').value;
var msg = document.getElementById('message').value;
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
form.submit();
}
});
});
Here is my PHP:
$subject = "Website Contact Form Enquiry";
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+#[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'info#bgv.co.za'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
And here is my FORM:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" >
<div class="_required"><p class="label_left">Name*</p><input type="text" size="50" name="contactname" id="contactname" value="" class="required" /></div><br/><br/>
<div class="_required"><p class="label_left">E-mail address*</p><input type="text" size="50" name="email" id="email" value="" class="required email" /></div><br/><br/>
<p class="label_left">Message</p><textarea rows="5" cols="50" name="message" id="message" class="required"></textarea><br/>
<input type="submit" value="submit" name="submit" id="submit" />
</form>
The <div id='sadhu'> is not defined anywhere. You're appending it to #content with Javascript code, but it doesn't exist.
$("#content").append('#sadhu');
You might want something like
$("#content").append("<div id='sadhu'>stuff in here...</div>");
You have placed the form entries into something with the id out. If that stuff should also be in <div id='sadhu'>, then you can just place the .html() of out into it:
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
$("#content").append("<div id='sadhu'>" + $("#out").html() + "</div>");