0
DEMO - http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/阿賈克斯PHP表單不是住同一頁面上提交後
我想實現在網頁上面提到的形式「〜我們發一個電子郵件〜」專門對頁的發送確認無刷新/路由主頁面。
http://logohour.com/form.html這是表格我設計使用相同的編碼結構。一切工作正常，但提交路由到php頁面發送確認。我想要提供與上述DEMO在提交後顯示的相同的頁面確認消息。
下文提到的是我的Ajax & PHP：
<?php
// Define some constants
define("RECIPIENT_NAME", "John Smith");
define("RECIPIENT_EMAIL", "[email protected]");
define("EMAIL_SUBJECT", "SiderBar Visitor Message");
// Read the form values
$success = false;
$Name = isset($_POST['Name']) ? preg_replace("/[^\.\-\' a-zA-Z0-9]/", "", $_POST['Name']) : "";
$Email = isset($_POST['Email']) ? preg_replace("/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Email']) : "";
$Phone = isset($_POST['Phone']) ? preg_replace("/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Phone']) : "";
$Country = isset($_POST['Country']) ? preg_replace("/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Country']) : "";
$Select = isset($_POST['Select']) ? preg_replace("/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Select']) : "";
$Message = isset($_POST['Message']) ? preg_replace("/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['Message']) : "";
// If all values exist, send the email
if ($Name && $Email && $Phone && $Country && $Select && $Message) {
$msgToSend = "Name: $Name\n";
$msgToSend .= "Email: $Email\n";
$msgToSend .= "Phone: $Phone\n";
$msgToSend .= "Sender Country: $Country\n";
$msgToSend .= "Sender Select: $Select\n";
$msgToSend .= "Message: $Message";
$recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
$headers = "From: " . $Name . " <" . $Email . ">";
$success= mail($recipient, EMAIL_SUBJECT, $msgToSend, $headers);
}
// Return an appropriate response to the browser
if (isset($_GET["ajax"])) {
echo $success? "success" : "error";
} else {
?>
<html>
<head>
<title>Thanks!</title>
</head>
<body>
<?php if ($success) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
<?php if (!$success) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
<p>Click your browser's Back button to return to the page.</p>
</body>
</html>
<?php
}
?>
// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
var messageDDelay = 2000; // How long to display status messages (in milliseconds)
// Init the form once the document is ready
$(init);
// Initialize the form
function init() {
// Hide the form initially.
// Make
Form() the form 's submit handler.
// Position the form so it sits in the centre of the browser window.
// When the "Send us an email" link is clicked:
// 1. Fade the content out
// 2. Display the form
// 3. Move focus to the first field
// 4. Prevent the link being followed
$('a[href="#contact_form"]').click(function() {
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function() {
$('#Name').focus();
})
return false;
});
// When the "Cancel" button is clicked, close the form
$('#cancel').click(function() {
$('#contact_form').fadeOut();
$('#content').fadeTo('slow', 1);
});
// When the "Escape" key is pressed, close the form
$('#contact_form').keydown(function(event) {
if (event.which == 27) {
$('#contact_form').fadeOut();
$('#content').fadeTo('slow', 1);
}
});
}
// Submit the form via Ajax
function submitFForm() {
var contact_form = $(this);
// Are all the fields filled in?
if (!$('#Name').val() || !$('#Email').val() || !$('#Phone').val() || !$('#Country').val() || !$('#Select').val() || !$('#Message').val()) {
// No; display a warning message and return to the form
$('#incompleteMMessage').fadeIn().delay(messageDDelay).fadeOut();
contact_form.fadeOut().delay(messageDDelay).fadeIn();
} else {
// Yes; submit the form to the PHP script via Ajax
$('#sendingMMessage').fadeIn();
contact_form.fadeOut();
$.ajax({
url: contact_form.attr('action') + "?ajax=true",
type: contact_form.attr('method'),
data: contact_form.serialize(),
success: submitFFinished
});
}
// Prevent the default form submission occurring
return false;
}
// Handle the Ajax response
function submitFFinished(response) {
response = $.trim(response);
$('#sendingMMessage').fadeOut();
if (response == "success") {
// Form submitted successfully:
// 1. Display the success message
// 2. Clear the form fields
// 3. Fade the content back in
$('#successMMessage').fadeIn().delay(messageDDelay).fadeOut();
$('#Name').val("");
$('#Email').val("");
$('#Phone').val("");
$('#Country').val("");
$('#Selct').val("");
$('#Message').val("");
$('#content').delay(messageDDelay + 500).fadeTo('slow', 1);
} else {
// Form submission failed: Display the failure message,
// then redisplay the form
$('#failureMMessage').fadeIn().delay(messageDDelay).fadeOut();
$('#contact_form').delay(messageDDelay + 500).fadeIn();
}
}
這是可怕的。你需要在表單提交時防止默認 - 像'$（「＃contactFormID」）。on（「submit」，submitFForm）'並且具有'函數submitFForm（e）{e.preventDefault（）; ...' – mplungjan