電子郵件發送完畢後在Div中更改文本？

我已經創建了一個HTML電子郵件聯繫表單，它具有PHP中的郵件處理程序。而且，我基本上想要做的是替換輸入表單中的文本，而不是瀏覽器重定向到沒有設計屬性的PHP文件。你可以看到我在這裏做...電子郵件發送完畢後在Div中更改文本？

http://www.noxinnovations.com/portfolio/thecommonwealth/index.html

「點擊查詢」帶出了HTML聯繫表。

有人請幫助我，非常感謝你，亞倫要做到這一點是使用AJAX你的表格，然後一旦你的AJAX調用已完成，更換提交

來源

2011-06-08 Aaron Brewer

您可以將index.html重命名爲index.php，將contact.php代碼和帖子合併到同一頁面。這是一個選擇嗎？ – karim79 2011-06-08 01:23:42

一種方式你DIV的innerHTML（「點擊查詢」）說出你想要的。

如果你使用jQuery，Ajaxify是一個插件，幾乎可以將任何形式的標準請求提交給AJAX請求。

來源

2011-06-08 01:21:48

2選項供您：

變化的index.html的index.php，這樣在文件中，你可以使用PHP代碼來處理表單提交，並在直道上返回值頁。
使用jQuery使其易於使用AJAX。教自己如何使用它是一個很好玩的。

來源

2011-06-08 01:30:08

希望這會有所幫助。我所做的例子很簡單，但能夠支持真實站點的全部需求，這就是代碼在許多文件中被分開的原因。您可以根據需要進行修改。

運行contact.php查看示例。

文件（都在同一個目錄中，作爲失敗只是爲了測試奇文字長度..）：

contact.js [發送文本PHP腳本存儲，決定勝負和.. ]

function storeContactMessage() 
    { 
     var str = document.getElementById("contact_text").value ; 
     var url = "storeText.php"; 
     var params = "text=" + (str); 

     request.open("POST", url, true);//use post 

     // http headers 
     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); 
     request.setRequestHeader("Content-length", params.length); 
     request.setRequestHeader("Connection", "close"); 

     request.onreadystatechange = updatePage; 
     request.send(params); 

    }//////////////////// 

    //want status code 200 
    function updatePage() { 
    if (request.readyState == 4) { 
     if (request.status == 200) 
     { 
       //split the flag from html content 
       var r=request.responseText.split("$$"); 

       //on success call the success css to hide the html form 
       if(r[0] == '1') 
        afterContactCSS('contactSuccess.css'); 

       else //otherwise call failure css to display red color error message 
        afterContactCSS('contactFailure.css'); 

        document.getElementById("after_contact").innerHTML = r[1] ; 
     } 
     else{ 
       alert("status is " + request.status); 
     } 
    } 
    } 



     function afterContactCSS(filename) 
     { 
      //LOADING CSS 
      var css=document.createElement("link") 
      css.setAttribute("rel", "stylesheet"); 
      css.setAttribute("type", "text/css"); 
      css.setAttribute("href", filename); 
      document.getElementsByTagName('head')[0].appendChild(css); 
     }  


     function afterContactCSS(filename) 
     { 
      //LOADING CSS 
      var css=document.createElement("link") 
      css.setAttribute("rel", "stylesheet"); 
      css.setAttribute("type", "text/css"); 
      css.setAttribute("href", filename); 
      document.getElementsByTagName('head')[0].appendChild(css); 
     }

asynchConnect.js [建立連接]

var request = false; 
try { 
    request = new XMLHttpRequest(); 
} catch (trymicrosoft) {       
    try { 
    request = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (othermicrosoft) { 
    try { 
     request = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch (failed) {     
     request = false;  
    } 
    } 
} 

if (!request) 
    alert("Error initializing XMLHttpRequest!");

個contact.css [在默認第一次加載CSS]

#after_contact 
{ 
display:none; 
} 

#contact_form 
{ 
color:blue; 
}

storeText.php [存儲文本數據庫，決定勝負，負載類似腳本]

<?PHP 

    //use this flag to inform js on failure or success 
    //randomization will make behaviour look like real in example 
    if(is_int( strlen($_POST['text'])/2 )) 
     echo $flag=1; 
    else 
     echo $flag=0; 

    //send delimiter 
    echo '$$'; 

    if($flag==1) 
     include 'success.php'; 
    else 
     include 'failure.php'; 
?>

contactFailure.css [css for failre]

#after_contact 
{ 
display:block; 
}

成功。PHP [你可能想要做成功做某事，變化的內容，顯示消息等]

<div style="color:orange;"> 
Thank you! We will read your message soon.<br> 
<a href=home.php>Now go to Home</a> 
</d>

failure.php [類似於success.php]

<div style="color:red;"> 
We are sorry! Message was not successfully stored! Please try again! 
</d>

contactSuccess.css [css for failure]

#after_contact 
{ 
display:block; 
} 

#contact_form 
{ 
display:none; 
}

contact.php

<html> 
    <head> 
    <!--Setup the HTTP Request--> 
    <script type='text/javascript' src='asynchConnect.js'></script> 
    <!--Use the HTTP Request--> 
    <script type='text/javascript' src='contact.js'></script> 
    <!--Load CSS--> 
    <link rel="stylesheet" type="text/css" href="contact.css" /> 


    <title>Contact us..</title> 
    </head> 
    <body> 

<!--Other html--> 
Other html, menu whatever,...<br><br> 

<!--This is the contact form--> 
<div id="contact_form"> 
    Contact Us:<br> 
    <textarea rows="8" cols="80" id="contact_text"></textarea><br> 


<input type='button' onclick='storeContactMessage();' value='Send'/> 

</div> 


<!--This is for success--> 
<div id="after_contact"></div> 





<!--Other html--> 
<br><br>Other html, footer whatever,... 


</body> 
</html>

來源

2011-06-08 08:18:33 Melsi

電子郵件發送完畢後在Div中更改文本？

回答

相關問題