Change Text In Div After E-Mail Has Been Sent?

I have created an HTML E-Mail Contact Form, which has a mail handler in PHP. And, what I basically want to do is replace the text in the input form instead of the browser redir开发者_如何学运维ecting to the PHP File, which has no design attributes. You can see what I have made here...

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

"Click To Inquire" brings out the HTML Contact Form.

Someone please help me, Thank you very much, Aaron

One way to do this would be to submit your form using AJAX and then once your AJAX call has completed, replace the innerHtml of your div ("Click to Inquire") to say what you want.

If you are into jQuery, Ajaxify is a plugin what would turn almost any form submitting a standard request to a AJAX request.

2 options for you:

1. Change index.html to index.php, so that in the file you can use PHP code to handle the form submit, and return the value straight on the page.

2. Using jQuery to make it easy and quick with AJAX. Teach yourself how to use it is a good fun.

Hope this helps. The example I've made is simple but yet capable to support full needs of a real site, that's the reason code is separated in many files. You modify it to your needs.

Run contact.php to see the example.

Files (all in one directory, odd text length taken as failure just for testing.. ):

contact.js [sends the text to php script for storage, decides the outcome and...]

 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 [set up connection]

 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 [the css on the default-first load]

 #after_contact
{
display:none; 
}

#contact_form
{
color:blue;  
}

storeText.php [store text to database, decides the outcome, loads analogous script]

<?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 [you might want to do sth on success,change content, display message etc]

<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 [analogous to 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>