ページを再ロードせずにフォームを送信する方法

Question

ページを再読み込みせずにフォームを送信する方法私はajaxを使用する必要があることを知っていますが、どうすればいいですか？

htmlファイル：

<form name='myform' method="post" action="send.php"> 
       <span class="close-btn" id="close">&#10006;</span> 
       <p>Введите свои контактные данные</p> 
       <p>Мы Вам перезвоним</p> 
       <input type="text" name="name" placeholder="Имя" maxlength="30"> 
       <p class="Error" id="Error">Это поле обязательное для заполнения</p> 
       <p class="ErrorTwo" id="ErrorTwo">Некорректный ввод</p> 
       <input type="tel" name="phone" placeholder="Телефон" maxlength="13"> 
       <p class="Error" id="telError">Это поле обязательное для заполнения</p> 
       <p class="ErrorTwo" id="telErrorTwo">Некорректный ввод</p> 
       <input type="submit" value="Отправить заявку" name="save" id="save" disabled> 
       <p>Данные не передаються третьим лицам</p> 
      </form> 

PHP：

<?php 
$ToEmail = 'myemail@gmail.com'; 
$EmailSubject = 'форма обратной связи'; 
$mailheader = "From: ".$_POST["email"]."\r\n"; 
$MESSAGE_BODY = "Имя: ".$_POST["name"].""; 
$MESSAGE_BODY .= "Телефон: ".$_POST["phone"].""; 
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 
?> 

JS：

/------------------- ----------検証--------------------------------------- -/

//validation name 
    document.myform.name.onchange= function() { 
     var name = document.myform.name.value; 
     if (name === "") { 
      document.myform.name.removeAttribute("class", "ready"); 
      document.myform.name.style.border = "1px solid #da3637"; 
      document.getElementById("Error").style.display = "block"; 
      document.getElementById("ErrorTwo").style.display = "none"; 
     } else { 
       document.myform.name.style.border = "1px solid #509d12"; 
       document.getElementById("Error").style.display = "none"; 
       var pattern = new RegExp("^[a-z]+$", "i"); 
       var isValid = this.value.search(pattern) >= 0; 
       if (!(isValid)) { 
        document.myform.name.style.border = "1px solid #da3637"; 
        document.getElementById("ErrorTwo").style.display = "block"; 
        document.myform.name.removeAttribute("class", "ready"); 
       } else { 
        document.getElementById("ErrorTwo").style.display = "none"; 
        document.myform.name.style.border = "1px solid #509d12"; 
        document.myform.name.setAttribute("class", "ready"); 
       } 
     } 
    }; 


    //validation phone 
    document.myform.phone.onchange = function() { 
     var name = document.myform.phone.value; 
     if (name === "") { 
      document.myform.phone.removeAttribute("class", "ready"); 
      document.myform.phone.style.border = "1px solid #da3637"; 
      document.getElementById("telError").style.display = "block"; 
      document.getElementById("telErrorTwo").style.display = "none"; 
     } else { 
       document.myform.phone.style.border = "1px solid #509d12"; 
       document.getElementById("telError").style.display = "none"; 
       var pattern = new RegExp("^\\d+$"); 
       var isValid = this.value.search(pattern) >= 0; 

       if (!(isValid)) { 
        document.myform.phone.style.border = "1px solid #da3637"; 
        document.getElementById("telErrorTwo").style.display = "block"; 
       } else { 
        document.getElementById("telErrorTwo").style.display = "none"; 
        document.myform.phone.style.border = "1px solid #509d12"; 
        document.myform.phone.setAttribute("class", "ready"); 
       } 
      } 
    }; 

    //filling the form 
    document.myform.onchange = function() { 
     var a = document.myform.name.getAttribute("class"); 
     var c = document.myform.phone.getAttribute("class"); 
     if (a === "ready" && c === "ready") { 
      document.getElementById("save").removeAttribute("disabled"); 
      document.getElementById("save").style.cursor = "pointer"; 
      document.getElementById("save").style.opacity = "1"; 
     } 
    }; 

Answer 1

AJAXを使用してください。あなたのPHPページで、

function sendForm(formName){ 
     var http = new XMLHttpRequest(); 
     http.open("POST","YourPage.php"); 
     http.send(JSON.encodeForm(document.forms[formName])); 
     http.onreadystatechange = function(){ 
     if(http.readyState == 4 && http.status == 200){ 
      console.log(http.responseText); //PHP page's response handling 
     } 
     } 
    } 
    JSON.encodeForm = function(form){ 
     var array = {}; 
     for (key in form) { 
     var item=form[key]; 
     if(form.hasOwnProperty(key) && item == "[object HTMLInputElement]"){ 
      array[item.name]=item.value; 
     } 
     } 
     return JSON.stringify(array); 
    } 

その後：

<form name='myForm' onsubmit='event.preventDefault(); sendForm("myForm");'>...</form> 

のJsで：HTMLで ：私は、JSONのようにフォームをencondingお勧めします[送信フォームの

$input = json_decode(file_get_contents("php://input") , true); 
echo "Saved"; 

Answer 2

私の意見では、より良いオプションは、サーバー側のファイル（some.php）のデータを検証し、クライアント側のファイルへの応答を返すことです。

php codeは、次のようになります。あなたのjsファイルで

$var = $_POST['some']; 

if($var (bla bla bla)) 
    { echo 'ok.'; } else { echo 'Error'; } 

応答は、あなたのPHPファイルからのエコーメッセージです。

jsfiddle

EDIT（追加入力マスク情報）：

あなただけ（たとえばjquery input maskのために）いくつかの入力マスクライブラリを使用するクライアント側のファイルで、あなたの入力を検証する必要がある場合。これは、独自の検証スクリプトを作成するよりもはるかに簡単です。