I went off an tutorial when creating this form, and have edited and formatted it to match my site. The original form works just the way I want it to, and mine works except for instead of sliding up on submitting the form, the page refreshes. I have compared the code so many times and looked all over the place and can’t figure out what I changed or left out that is causing mine to refresh the page. Any help would be greatly appreciated. I’ve spent hours working on this, and I’m sure it’s somethings small.
Here is the original tutorial: http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/
Here is my code:
PHP in the header:
<?php
error_reporting(E_ALL ^ E_NOTICE); // hide all basic notices from PHP
//If the form is submitted
if(isset($_POST['submitted'])) {
// require a name from user
if(trim($_POST['contactName']) === '') {
$nameError = '<strong>WARNING:</strong> Please provide your full name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
// need valid email
if(trim($_POST['email']) === '') {
$emailError = '<strong>WARNING:</strong> Please provide an email address.';
$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'Please provide a valid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
// require a phone from user
if(trim($_POST['phone']) === '') {
$phoneError = '<strong>WARNING:</strong> Please provide a phone number.';
$hasError = true;
} else {
$phone = trim($_POST['phone']);
}
// we need at least some content
if(trim($_POST['comments']) === '') {
$commentError = '<strong>WARNING:</strong> Please provide a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
// upon no failure errors let's email now!
if(!isset($hasError)) {
$emailTo = 'myemail@gmail.com';
$subject = 'Submitted message from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nComments: $comments";
$headers = 'From: ' .' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
// set our boolean completion value to TRUE
$emailSent = true;
}
}
?>
Form with PHP:
<div class="separator">
<h5>Keep in touch</h5>
<div class="sep_line"></div><!-- separator line -->
</div>
<div class="clear"></div>
<div class="twoThirds">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="Note Success hideit">
<p><strong>SUCCESS: </strong>Your message has been sent.</p>
</div>
<?php } else { ?>
<div id="respon">
<?php if(isset($hasError) || isset($captchaError) ) { ?>
<div class="Note Failure hideit">
<p><strong>FAILURE: </strong>Error submitting the message.</p>
</div>
<?php } ?>
<form action="contact.php" method="post" id="contact-form">
<label for="name">
Name: * </label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="22" tabindex="1" class="nameInput">
<?php if($nameError != '') { ?>
<br><div class="Note Warning hideit"><p><?php echo $nameError;?></p></div>
<?php } ?>
<label for="email">
Email: * </label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" size="22" tabindex="2" class="emailInput">
<?php if($emailError != '') { ?>
<br><div class="Note Warning hideit"><p><?php echo $emailError;?></p></div>
<?php } ?>
<label for="phone">
Phone: * </label>
<input type="text" name="phone" id="phone" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" size="22" tabindex="3" class="webInput">
<?php if($phoneError != '') { ?>
<br><div class="Note Warning hideit"><p><?php echo $phoneError;?></p></div>
<?php } ?>
<label for="message">
Your Message: * </label>
<textarea name="comments" id="commentsText" tabindex="4" class="messageInput"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<br><div class="Note Warning hideit"><p><?php echo $commentError;?></p></div>
<?php } ?>
<br>
<input name="reset" class="button" type="reset" id="reset" tabindex="5" value="Reset">
<input name="submit" class="button" type="submit" id="submit" tabindex="6" value="Submit">
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
</div>
<?php } ?>
</div><!-- end main contact-us -->
Javascript:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$('form#contact-us').submit(function() {
$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="Note Warning hideit">Your forgot to enter your '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="Note Warning hideit">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contact-us').slideUp("fast", function() {
$(this).before('<p class="Note Success hideit"><strong>SUCCESS: </strong>Your message has been sent.</p>');
});
});
}
return false;
});
});
//-->!]]>
</script>
The solution is simple,
Mainly you are missing to specify the correct
idof the form that you are submitting,Where it should be
The there are some missing attributes in the form, which you are selecting in javascript
Eg.
.requiredField.errorTry to correct those also.
EDIT
Roughly edited form block
YET ANOTHER EDIT
In your JS file change,
to
and
to
as in the tutorial.