Full website: http://adamginther.com
I've used two separate tutorials to build this, one for the PHP and one for the AJAX. My goal is to build a contact form that will check for errors. If there are no errors then it will prompt users with a message saying that the message has been sent without refreshing the page.
When the website is run locally it does not display the errors until the button is pressed, when run on the server the errors are displayed on entering the page. When the contact button is pressed it loads PHP and the page goes blank.
HTML
<form action="contact.php" method="post">
<label name="firstName">Name: </label>
<input type="text" name="firstName" id="firstName">
<label class="error" for="firstName" id="name_error">I need your name.</label>
<br id="namebreak">
<br>
<label name="email" for="email" id="email_label">E-mail Address: </label>
<input type="text" name="email" id="email">
<label class="error" for="firstName" id="name_error">I need your e-mail.</label>
<br id="emailbreak">
<br>
<label name="message">Message: </label>
<textarea name="message" id="message"></textarea>
<label class="error" for="firstName" id="name_error">I need your message.</label>
<br id="messagebreak">
<br>
<input type="submit" value="Say Hello!" id="contactbutton" class="button">
JavaScript
$(function () {
$('.error').hide();
$(".button").click(function () {
$('.error').hide();
var name = $("input#firstName").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
$("#namebreak").hide();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
$("#emailbreak").hide();
return false;
}
var message = $("input#message").val();
if (message == "") {
$("label#message_error").show();
$("input#message").focus();
$("#messagebreak").hide();
return false;
}
var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function () {
$('#contactme').html("<div id='message'></div>");
$('#message').html("<p>Contact form submitted.</p>")
.append("<p>I will get back to you shortly.</p>")
.hide()
.fadeIn(1500, function () {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
PHP
<?php
$field_firstName = $_POST['firstName'];
$field_email = $_POST['email'];
$field_message = $_POST['message'];
$mail_to = 'gintherthegreat@gmail.com';
$subject = 'AdamGinther.com message from '.$field_firstName;
$body_message = 'From: '.$field_firstName."
";
$body_message .= 'E-mail: ' .$field_email."
";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."
";
$headers .= 'Reply-To: '.$field_email."
";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
$('#panel').show();
$('#output-inside').text('Thank you ' + firstName + ', I will get back to you as soon as I can.');
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
$('#panel').show();
$('#output-inside').text('I am sorry ' + firstName + ', but there was a problem processing your request. I can be contacted by e-mail at GintherTheGreat@Gmail.com'); </script>
<?php
}
?>
I think you need to prevent default action of the submit button.
Use,
$(function() {
$('.error').hide();
$(".button").click(function(e) {
e.preventDefault();
// Other code
});
});
change
<form action="contact.php" method="post">
to
<form action="contact.php" method="post" id="form_id">
and change
$(".button").click(function () { to
$('#form_id').submit(function (event) {
event.preventDefault();
...
...
Just simply change the button type from submit to button so it will not submit the form and goes to php blank page by default and call the function for u.
Try the following:
<form action="contact.php" method="post" onsubmit="return false;">
Instead of using a form, why not just have an external .php (e.g. sendmail.php) script that handles your php, and then use jQuery to handle the POST.
$.post('sendmail.php',{
mail:mail,
message:message
}, function(data) {
//Echo either "success" or "false" in the sendmail.php script
if(data == "success"){
//Do something - e.g. (alert('Message has been sent');)
}else{
//Do something
}
});