コンタクトフォームでajaxを使用する方法

Question

私は単純なコンタクトフォームを持っています。私は何時間もGoogleを検索していますが、それから連絡先を作成する方法についてはさまざまなものがありますが、本当にシンプルなものを探しています。私は私のフォームを使用したいと思うように、私はいくつかのAjaxコードを追加して、ページを現在のようにリロードしないようにし、フォームが提出している間にサブミットボタンを置き換える小さなアニメーションGIFを表示したい私が持っている成功メッセージ。

<?php 
// define variables and set to empty values 
$error = ""; $successMessage = ""; 
$fname = $email = $message = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $error .= "First name is required.<br>"; 
    } else { 
    $fname = test_input($_POST["name"]); 
    // check if name only contains letters and whitespace 
    if (!preg_match("/^[a-zA-Z ]*$/",$fname)) { 
     $error .= "Only letters and white space allowed.<br>"; 
    } 
    } 

    if (empty($_POST["email"])) { 
    $error .= "Email is required.<br>"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $error .= "Invalid email format.<br>"; 
    } 
    } 


    if (empty($_POST["message"])) { 
     $error .= "Message is required.<br>"; 
    } else { 
    $message = test_input($_POST["message"]); 
    } 

    if ($error != "") { 

      $error = '<div class="formerror" role="alert"><p><strong>There were error(s) in your form:</strong><br></p>' . $error . '</div>'; 
} else { 

    $successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>'; 

      // $emailTo = "me@mydomain.com"; 

      //$subject = $_POST['subject']; 

      //$content = $_POST['content']; 

     // $headers = "From: ".$_POST['email']; 

     // if (mail($emailTo, $subject, $content, $headers)) { 

      //  $successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>'; 


     // } else { 

     //  $error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>'; 

      } 
//} 

} 



function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 


?> 

フォームコード：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    <div class="cform"> 
    <input type="text" class="contactfield cformbottom" id="name" placeholder="Your full name" name="name" value="<?php echo $fname;?>"> 

    <input type="email" class="contactfield cformbottom" id="email" name="email" placeholder="Your email" value="<?php echo $email;?>"> 


    <textarea class="contactfield" id="message" name="message" rows="3" placeholder="Your Message" value="<?php echo $message;?>"></textarea> 
      </div> 
    <input type="submit" class="newsbut" value="Submit"> 
</form><br> 
     <div id="error"><? echo $error.$successMessage; ?></div> 

jQueryの検証：

<script type="text/javascript"> 

      $("form").submit(function(e) { 

       var error = ""; 

       if ($("#name").val() == "") { 

        error += "Your name is required.<br>" 

       } 

       if ($("#email").val() == "") { 

        error += "Your email is required.<br>" 

       } 

       if ($("#message").val() == "") { 

        error += "Your message is required.<br>" 

       } 

       if (error != "") { 

       $("#error").html('<div class="formerror" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>'); 

        return false; 

       } else { 

        return true; 

       } 
      }) 


    </script> 

Answer 1

あなたは、私が投稿している以下の方法を使用することができます。関数の上にあるコメントを読んで、適切なパラメータで関数を呼び出してください。 remote_callを呼び出す前に、別のメソッドload_imageをコールバックし、コールバックでレスポンス後にdeload_image関数を呼び出します。

これは、Ajaxリクエストを送信する古い方法です。 apiはすぐに削除され、createbrowserオブジェクト関数（​​後の最後のメソッドを変更する必要があります）が削除されます。

以下のメソッドでは、アラート関数の動作を変更するためのカスタムアラート関数が呼び出されています。 // =================== ========================================== =================== // // // ====================== ================= AJAX要求を送る========================== == // // =========================== =============================================// /* 必須オブジェクト。以下に説明するように、さまざまなプロパティを持つ必要があります。いくつかは必須であり、その他のオプションです 必須object.actionScriptURL = と呼ばれるページの相対パス（サーバーのドキュメントルートからの相対パス） に沿ってurlwithクエリ文字列を指定することもできます（object.sendMethod = POST/GET）。デフォルト値は、ポスト です。オプションのobject.callType = ASYNC/SYNCです。デフォルト値はASYNC オプションobject.additionalData = formDataのように送信されるAnyData 任意object.callBack =サーバーから返される任意の関数。オブジェクトとしての機能が渡されている場合、その機能は */

function send_remoteCall(object) 
{ 
    var callType = true, sendMethod = 'POST', additionalData = null, callBack = ''; 
    if(IsValueNull(object.actionScriptURL)) 
     return false; 

    if(IsValueNull(object.sendMethod)) 
     sendMethod = 'POST'; 

    if(!IsValueNull(object.callType) && object.callType == 'SYNC') 
     callType = false; 

    additionalData = object.additionalData; 

    var xmlHttp = createBrowserObject(); 
    if(!IsValueNull(object.callBack)) 
    { 
     callBack = object.callBack; 
     xmlHttp.onreadystatechange = function(){ 
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      callBack(xmlHttp.responseText); 
     }; 
    } 
    xmlHttp.open(sendMethod,object.actionScriptURL,callType); 
    if(additionalData != null && additionalData != undefined){ 
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xmlHttp.setRequestHeader("Content-length", additionalData.length); 
     xmlHttp.setRequestHeader("Connection", "close"); 
    } 
    xmlHttp.send(additionalData); 
} 

function loadImage() 
{ 
    //document.getElementById('LayOutDiv').style.display = "block"; 
    //showCenter('<div id="fade"><img src="../../Common/images/aloader.gif"></div>'); 
    //document.getElementById('LayOutDiv').innerHTML = '<img src="../../Common/images/aloader.gif">'; 
    var LoadingImage = document.getElementById('LoadingImage'); 
    if(!IsValueNull(LoadingImage)){ 
     LoadingImage.style.display = "block"; 
     showCenter('LoadingImage'); 
    } 
    LayOutDiv = document.getElementById('LayOutDiv'); 
    if(!IsValueNull(LayOutDiv)) 
     LayOutDiv.style.display = "block"; 
    setTimeout(deloadImage, 15000); 
} 

/*=======================================================*/ 
//===========FUNCTION TO HIDE THE LOADING EFFECT========== 
/*======================================================*/ 

function deloadImage() 
{ 
    //document.getElementById('LayOutDiv').innerHTML = ''; 
    LoadingImage= document.getElementById('LoadingImage'); 
    if(!IsValueNull(LoadingImage)) 
     LoadingImage.style.display = "none"; 
    LayOutDiv = document.getElementById('LayOutDiv'); 
    if(!IsValueNull(LayOutDiv)) 
     LayOutDiv.style.display = "none"; 
} 


//==============================================================================================// 
//========================= CREATE BROWSE OBJECT FOR AJAX =======================// 
//==============================================================================================// 
function createBrowserObject() 
{ 
    if(xmlHttp) 
     delete xmlHttp; 

    var xmlHttp; 
    try 
    { 
     xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari  
    } 
    catch (e) 
    { 
     try 
     { 
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer     
     } 
     catch (e) 
     { 
      try 
      { 
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e) 
      { 
       Alert(JavascriptNotWorking); 
      } 
     } 
    } 

    return xmlHttp; 
}