Question

我创建了一个HTML电子邮件联系表单，它在PHP中有一个邮件处理程序。而且，我基本上想要做的是替换输入表单中的文本而不是浏览器重定向到没有设计属性的PHP文件。你可以看到我在这里做的......

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

“点击查询”会显示HTML联系表格。

有人请帮助我，非常感谢你，亚伦

Answer 1

这样做的一种方法是使用AJAX提交表单，然后在AJAX调用完成后，替换div的innerHtml（“Click to Inquire”）来说出你想要的内容。

如果您使用的是jQuery，Ajaxify是一个插件，几乎可以将任何提交标准请求的表单转换为AJAX请求。

Answer 2

2个选项适合您：

将index.html更改为index.php，以便在文件中使用PHP代码处理表单提交，并在页面上直接返回值。
使用jQuery使AJAX变得简单快捷。教自己如何使用它是一件好事。

Answer 3

希望这会有所帮助。我所做的示例很简单但能够支持真实站点的全部需求，这就是代码在许多文件中分离的原因。您可以根据需要进行修改。

运行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; 
}

success.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>

发送电子邮件后更改Div中的文本？

3 个答案: