2016-07-31 149 views
-1

如何在不重新加载页面的情况下进行表单提交我知道我必须使用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 = '[email protected]'; 
$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"; 
     } 
    }; 
+6

[提交表单的可能的复制无需重新加载页面](http://stackoverflow.com/questions/18169933/submit-form-without-reloading-page) –

+2

参考https://developer.mozilla.org/en/docs/AJAX – binariedMe

回答

2

使用AJAX。我建议你enconding形式JSON: 在HTML:

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

在JS:

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); 
    } 

然后,在你的PHP页面:

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

在我看来更好的选择是验证服务器端文件(some.php)中的数据并返回对客户端文件的响应。

php code会是这样的:在你的js文件

$var = $_POST['some']; 

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

响应是从你的PHP文件的回声消息。

jsfiddle

编辑(添加输入掩码信息):

,如果您需要在客户端文件,以验证您的输入,只需使用一些输入掩码库(例如jquery input mask)。这比创建自己的验证脚本要容易得多。

相关问题