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表單提交不保留在同一頁面

回答

相關問題