Ajax表单提交不保留在同一页面

我设计了一个带有PhP/Ajax的侧边栏浮动窗体。这是链接：http://logohour.com/form.html 一切都很好，但是当访问者填写并提交表单时，它将路由到另一页进行确认。Ajax表单提交不保留在同一页面

我使用几乎相同的可点击表单编码，它的工作正常，但在这个侧栏浮动形式我误解可能是在Ajax或PHP。

阿贾克斯你可以在页面源代码发现，这是我的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 
$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 
} 
?>

这里是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();  } }

来源

2017-04-18 Syed Muhammad Iftikhar

显示您的ajax代码。它是重要的，我们无法找到源代码使用页面源 –

您正在发送表单的内容使用post方法...当PHP发送响应，它取代了加载的DOM ... –

U不知道这是否我明白了。你点击提交，问题是重定向你（我尝试了页面，但提交时没有发生）。如果是这样的话，这可能是帮助：https://www.w3schools.com/jsref/event_preventdefault.asp –

使用功能类似这样的：

$("#contact_form").submit(submitFForm);

来源

2017-04-18 20:05:34 moisrex

您没有调用submitFForm（）函数。尝试点击事件设置为提交按钮或“提交”事件设置的形式，例如：

$("#contact_form").submit(function(e) { 
submitFForm(); 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
});

来源

2017-04-18 20:08:57

我不知道如果我理解正确的，但我觉得你说的这个代码ISN运作正常：

$('a[href="#contact_form"]').click(function() { 
    $('#content').fadeTo('slow', .2); 
    $('#contact_form').fadeIn('slow', function() { 
     $('#Name').focus(); 
    }) 
    return false; 
});

是吗？如果是这样，尝试用这种替代它：

$('#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; 
});

同时使用event.preventDefault()和return false是正确的方式来阻止预期的重定向。你的jQuery选择器也需要更正。

来源

2017-04-18 20:11:27 rbkb

好吧，使用这个网站（http://logo.logohour.com/），如果你点击滑块上的黄色按钮“请求报价”的表单打开，成功提交没有页面更改...我试图提供相同的侧边栏形式。 –

$('#sendMMessage').click(function(e){ 
e.preventDefault(); 

.... ajax ...etc 

})

您必须注册默认的提交行为。

来源

2017-04-18 20:14:23 Vladut

Ajax表单提交不保留在同一页面

回答

相关问题