Изменить текст в Div после отправки электронной почты?

Question

Я создал HTML контактную форму электронной почты, которая имеет обработчик почты на PHP. И что я в основном хочу сделать, это заменить текст в форме ввода вместо браузера, перенаправляющего на PHP-файл, который не имеет дизайнерских атрибутов. Вы можете увидеть, что я сделал здесь ...

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

"Click To Inquire" выводит контактную форму HTML.

Кто-нибудь, пожалуйста, помогите мне, Большое спасибо, Аарон

Answer 1

Один из способов сделать это - отправить форму, используя AJAX, а затем, после завершения вызова AJAX, заменить innerHtml вашего div («Click to Inquire»), чтобы сказать, что вы хотите.

Если вы в jQuery, Ajaxify - это плагин, который превратит почти любую форму, отправляющую стандартный запрос в запрос AJAX.

Answer 2

2 варианта для вас:

1. Измените index.html на index.php, чтобы в файле вы могли использовать код PHP для обработки отправки формыи вернуть значение прямо на странице.

2. Использование 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 для 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>

fail.php [аналог успеха.php]

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

contactSuccess.css [css для сбоя]

#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>