如何在彈出窗口上彈出一個確認信息？

Question

我有很大的問題，使這種接觸形式，可以在下面的視覺上看到。我希望聯繫人表單顯示在提交感謝信息或確認信息上，而不是重定向到contact.php文件，如果沒有任何樣式，您可以在提供的鏈接上看到此操作。

我發現了一些信息，我可以用Jquery Ajax做到這一點，我也試過在下面顯示，但我仍然無法讓它在提交時顯示消息。

有沒有人知道一個更簡單的方法來做到這一點，也許指向我在正確的方向，因爲這是我一直在試圖修復上帝知道多久。

感謝您的幫助

視覺： http://madaxedesign.co.uk/dev/index.html

PHP & HTML：

<?php 
     $your_email = "maxlynn@madaxedesign.co.uk"; 
     $subject = "Email From Madaxe"; 
     $empty_fields_message = "<p>Please go back and complete all the fields in the form.</p>"; 
     $thankyou_message = "<p>Thank you. Your message has been sent. We Will reply as soon as possible.</p>"; 

     $name = stripslashes($_POST['txtName']); 
     $email = stripslashes($_POST['txtEmail']); 
     $message = stripslashes($_POST['txtMessage']); 

     if (!isset($_POST['txtName'])) { 

     ?> 
     <form id="submit_message" class="hide_900" method="post" action="/contact.php" onsubmit="javascript: doSubmit();"> 
      <div id="NameEmail"> 
       <div> 
        <label for="txtName">Name*</label> 
        <input type="text" title="Enter your name" name="txtName" /> 
       </div> 
       <div> 
        <label for="txtEmail">Email*</label> 
        <input type="text" title="Enter your email address" name="txtEmail" /> 
       </div> 
      </div> 
      <div id="MessageSubmit"> 
       <div> 
        <textarea maxlength="1200" title="Enter your message" name="txtMessage"></textarea> 
        <label for="txtMessage">Message</label> 
       </div> 
       <div class="submit"> 
        <input type="submit" value="Submit" /></label> 
       </div> 
      </div> 
     </form> 

的Jquery：

function doSubmit(){ 
    var postData = jQuery('#submit_message').serialize();  

    jQuery.ajax({ 
    url: '/contact.php', 
    data: postData 
    }).done(function(html) { 
    alert(html); 
    }); 

Answer 1

您可以添加return false;在doSubmit函數或以下代碼的末尾，以防止表單將用戶重定向到操作頁面。

var doSubmit = function (event) { 
    var postData = jQuery('#submit_message').serialize();  

    jQuery.ajax({ 
    url: '/contact.php', 
    data: postData 
    }).done(function(html) { 
    alert(html); 
    }); 
    event.preventDefault(); 
} 

$(function() { 
    $('#submit_message').submit(doSubmit); 
}); 

修改HTLM

<form id="submit_message"> 
... 
</form> 

這是什麼代碼在做什麼？

首先，我們正在定義一個函數來提交表單數據。 注意函數中的事件參數。該函數中的第一個變量是在ajax-complient請求字符串中序列化的所有表單值。 .ajax()函數將所有數據發送到您的服務器。請注意，因爲您沒有在.ajax()函數中設置type參數，所以將使用GET HTTP方法發送數據。 最後，event.preventDefault()禁止在瀏覽器中觸發提交事件。當瀏覽器檢測到提交事件時，它將嘗試根據<form> html標記中的action和method參數提交表單。通常，此提交將執行用戶重定向至action頁面。這event.preventDefault()將禁用此重定向。請注意，事件參數將由jQuery自動設置。

最後一部分，$(function() { ... });部分表示「在文檔完全加載時執行此部分」。它確保在調用.submit()方法之前存在帶有sumbit_message id的元素。這最後一個方法是一個事件綁定器。這意味着當在submit_message表單上觸發提交事件時，函數doSubmit將被調用。

我希望你對這個腳本有更好的理解。這是一個非常基礎的，但如果你清楚瞭解機制，它將幫助你成爲更好的jQuery程序員。:)

Fiddle Demo

Answer 2

1.<form onsubmit='confirm()'> 
function confirm() 
{ 
alert("Thank You"); 
} 

2.in contact.php打電話時顯示的頁面再次

Answer 3

您需要防止形式的默認事件。爲此，請將e.preventDefault();函數添加到函數的頂部，以防止此事件發生。

另請注意，我們正在將e參數傳遞給您的函數。這代表已被解僱的事件。

function doSubmit(e){ 
    e.preventDefault(); 
    var postData = jQuery('#submit_message').serialize();  

    jQuery.ajax({ 
    url: '/contact.php', 
    data: postData 
    }).done(function(html) { 
    alert(html); 
    }); 
} 

Answer 4

試試這個

改變你的形式與

<form id="submit_message" class="hide_900" method="post"> 

和腳本把它

$("#submit_message").submit(function(e){ 
    e.preventDefault(); 
    //call your ajax 
});