如何设置PHP,HTML和JQuery,以使用户单击“提交”时页面不会更改?我的表单位于名为Fancybox(fancybox.net)的灯箱插件中
完整示例为my church’s website
这是我的PHP.
<?php
if(isset($_POST['email'])) {
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "nonya@yahoo.com";
$email_also ="nonya2@yahoo.com";
$email_subject = $first_name + " " + $last_name + " Website Inquiry";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
@mail($email_also, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
jQuery的:
<script>
$(document).ready(function() {
$("#question_form_link").fancybox({
'scrolling' : 'no',
'titleShow' : true,
'onClosed' : function() {
}
});
}); //end ready
</script>
和我的形式:
<div style="display:none">
<form id="question_form" name="question_form" method="post" action="send_form_email.php">
<table width="450px">
<tr>
<td valign="top"><label for="first_name">First Name *</label></td>
<td valign="top"><input type="text" name="first_name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="last_name">Last Name *</label></td>
<td valign="top"><input type="text" name="last_name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="email">Email Address *</label></td>
<td valign="top"><input type="text" name="email" maxlength="80" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="telephone">Telephone Number</label></td>
<td valign="top"><input type="text" name="telephone" maxlength="30" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="comments">Comments *</label></td>
<td valign="top"><textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
解决方法:
您需要ajax.首先,为所有输入字段分配一个ID,以便jQuery可以轻松选择它们.然后将以下内容添加到您的JS中.
$("#submit_button").click(function() {
// Get all of the values from the input fields thru their ID's
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var email = $("#email").val();
var telephone = $("#telephone").val();
var comments = $("#comments").val();
// Validate the form to make sure that all of the required fields are not left empty
if(first_name != ''
&& last_name != ''
&& email != ''
&& comments != '')
{
$.ajax({
url: "email.php",
type: "POST",
data: ({
first_name: first_name,
last_name: last_name,
email: email,
telephone: telephone,
comments: comments
}),
success: function(data)
{
// You might wanna display a message telling the user that the form was successfully filled out.
}
});
}
if(first_name == ''
|| last_name == ''
|| email == ''
|| comments == '')
{
alert("You left one of the required fields empty");
}
});