0

PHP でメール ハンドラーを備えた HTML メール コンタクト フォームを作成しました。そして、私が基本的にやりたいことは、ブラウザーがデザイン属性を持たない PHP ファイルにリダイレクトするのではなく、入力フォームのテキストを置き換えることです。ここで私が作ったものを見ることができます...

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

「Click To Inquire」をクリックすると、HTML コンタクト フォームが表示されます。

誰か助けてください、どうもありがとう、アーロン

4

3 に答える 3

2

これを行う 1 つの方法は、AJAX を使用してフォームを送信し、AJAX 呼び出しが完了したら、div (「Click to Inquire」) の innerHtml を置き換えて、必要なことを伝えることです。

jQuery に慣れている場合、Ajaxifyは、標準リクエストを送信するほぼすべてのフォームを AJAX リクエストに変換するプラグインです。

于 2011-06-08T01:21:48.950 に答える
1

2 つのオプション:

  1. index.html を index.php に変更して、ファイル内で PHP コードを使用してフォーム送信を処理し、値をページに直接返すことができるようにします。

  2. jQuery を使用してAJAXを簡単かつ迅速に作成します。それを使用する方法を自分自身に教えるのはとても楽しいです。

于 2011-06-08T01:30:08.850 に答える
0

お役に立てれば。私が作成した例は単純ですが、実際のサイトの完全なニーズをサポートすることができます。これが、コードが多くのファイルに分かれている理由です。必要に応じて変更します。

contact.php を実行して、例を確認してください。

ファイル (すべて 1 つのディレクトリにあり、奇数のテキストの長さは、テストのためだけに失敗と見なされます..):

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 [default-first load の 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]

#after_contact
{
display:block; 
}

success.php [成功時に sth を実行する、コンテンツを変更する、メッセージを表示するなど]

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

#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-08T08:18:33.063 に答える