1
創建此表單時我已經關閉了一個教程，並且已經編輯並格式化它以匹配我的網站。原始表單的工作方式與我想要的一樣，除了提交表單時頁面刷新之外，我的作品除外。我已經比較了很多次這些代碼，並且遍佈整個地方，並且無法弄清楚我改變或遺漏了什麼導致我的頁面刷新。任何幫助將不勝感激。我花了幾個小時來研究這個問題，而且我確信它有點小巧。PHP表單無刷新提交
原來這裏是教程：http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/
這裏是我的代碼：
PHP在標題：
<?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 = '[email protected]';
$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;
}
}
?>
形式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-\.][email protected]([\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>
檢查它是否在刷新之前拋出一個錯誤，可能有一個錯誤，防止代碼進入'return false'部分 – Ibu 2012-08-11 00:30:54
我沒有看到任何錯誤。 – 2012-08-11 00:46:19