Ajax表单提交不在同一页面上
[英]Ajax Form Submit not stay on same page
问题描述
I have designed a Sidebar Floating Form with PhP/Ajax. 
我用PhP / Ajax设计了一个侧边栏浮动表格。 Here is the Link: http://logohour.com/form.html Everything is fine but when a visitor fill and submit the form it routes to anther page for the confirmation. 这里是链接： http : //logohour.com/form.html一切都很好，但是当访客填写并提交表单后，它将路由到其他页面进行确认。
I am using almost the same coding for clickable form and its working fine but here on this sidebar floating form somewhere I am mistaking may be in Ajax or PHP. 我对可点击表单使用了几乎相同的编码，并且可以正常工作，但是在此我偏误的侧边栏浮动表单中，可能是在Ajax或PHP中。
Ajax you may find in Page Source, Here is my PHP: 您可能会在Page Source中找到Ajax，这是我的PHP：
<?php
// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "example@gmail.com" );
define( "EMAIL_SUBJECT", "SiderBar Visitor Message" );
// Read the form values
$ssuccess = 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 . ">";
$ssuccess = mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
}
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
echo $ssuccess ? "ssuccess" : "error";
} else {
?>
<html>
<head>
<title>Thanks!</title>
</head>
<body>
<?php if ( $ssuccess ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
<?php if ( !$ssuccess ) 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
}
?>
Here is the AJAX Source Code 这是AJAX源代码
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 submitForm() 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(), ssuccess: submitFFinished }); } // Prevent the default form submission occurring return false; } // Handle the Ajax response function submitFFinished(response) { response = $.trim(response); $('#sendingMMessage').fadeOut(); if (response == "ssuccess") { // Form submitted ssuccessfully: // 1. Display the ssuccess 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(); } }
4 个解决方案
解决方案1
0 2017-04-18 20:05:34
像这样使用您的函数：
$("#contact_form").submit(submitFForm);
解决方案2
0 2017-04-18 20:08:57
You are not calling the submitFForm() function. 您没有在调用SubmitFForm（）函数。 Try setting a click event to the submit button or setting the "submit" event to the form, eg: 尝试将点击事件设置为提交按钮，或将“提交”事件设置为表单，例如：
$("#contact_form").submit(function(e) {
submitFForm();
e.preventDefault(); // avoid to execute the actual submit of the form.
});
解决方案3
0 2017-04-18 20:11:27
I'm not sure if I understand correctly, but I think you're saying that this code isn't functioning correctly: 我不确定我是否理解正确，但是我认为您是在说此代码无法正常运行：
$('a[href="#contact_form"]').click(function() {
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function() {
$('#Name').focus();
})
return false;
});
Is that right? 那正确吗？ If so, try replacing it with this: 如果是这样，请尝试将其替换为：
$('#sendMMessage').click(function(event) {
event.preventDefault();
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function() {
$('#Name').focus();
});
alert('successfully stopped the other page loading');
return false;
});
Using both event.preventDefault() and return false is the correct way to stop the expected redirect. 同时使用event.preventDefault()和return false是停止预期重定向的正确方法。 Your jQuery selector also needed to be corrected. 您的jQuery选择器也需要更正。
解决方案4
0 2017-04-18 20:14:23
$('#sendMMessage').click(function(e){
e.preventDefault();
.... ajax ...etc
})
You have to annulate the default submit behaviour. 您必须取消默认的提交行为。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.