[英]PHP Form Submit Without Refresh
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/ 这是原始教程: http : //www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/
Here is my code: 这是我的代码:
PHP in the header: 标题中的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 = '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: 使用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: 使用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 id
of the form that you are submitting, 主要是您没有指定要提交的表单的正确id
,
<form action="contact.php" method="post" id="contact-form">
Where it should be 应该在哪里
<form action="contact.php" method="post" id="contact-us">
The there are some missing attributes in the form, which you are selecting in javascript 表单中有一些缺少的属性,您可以在javascript中选择
Eg. 例如。
.requiredField
.error
Try to correct those also. 尝试也纠正这些。
EDIT 编辑
Roughly edited form block 粗略编辑的表格块
<form action="contact.php" method="post" id="contact-us">
<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 requiredField">
<?php if ($nameError != '') { ?>
<br><div class="error"><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="email requiredField">
<?php if ($emailError != '') { ?>
<br><div class="error"><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 requiredField">
<?php if ($phoneError != '') { ?>
<br><div class="error"><p><?php echo $phoneError; ?></p></div>
<?php } ?>
<label for="message">
Your Message: * </label>
<textarea name="comments" id="commentsText" tabindex="4" class="messageInput requiredField"><?php if (isset($_POST['comments'])) {
if (function_exists('stripslashes')) {
echo stripslashes($_POST['comments']);
} else {
echo $_POST['comments'];
}
} ?></textarea>
<?php if ($commentError != '') { ?>
<br><div class="error"><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>
YET ANOTHER EDIT 还需要编辑
In your JS file change, 在您的JS文件更改中,
$(this).parent().append('<span class="Note Warning hideit">
to 至
$(this).parent().append('<span class="error">
and 和
$(this).before('<p class="Note Success hideit">
to 至
$(this).before('<p class="tick">
as in the tutorial. 如教程中所示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.