如何在验证JavaScript文件信息后将数据发送到php

Question

我听说过Ajax/XMLhttprequest，但我不太确定这是否是我需要将数据从JavaScript变量传输到php。

该网页基本上是一个联系我们页面，客户输入他们的信息和电子邮件，javascript检查输入是否输入并验证电子邮件是否有@。如果一切都很好，那么客户将能够提交表格，并且电子邮件应该交付给我。

我得到了两件事情，1我可以让PHP文件发送一封电子邮件给我，但然后我将不得不忽略JavaScript验证。 2我可以得到javacript验证工作，但后来php文件不会工作，因为我不能传输数据。我知道JavaScript执行在客户端和服务器端的PHP，这就是为什么我认为我需要在发送信息到服务器之前验证客户端的信息。

HTML

 <form id="uDF" method="post" onsubmit="submitValidation()"> 
      <input name="uDFName" type="text" id="fName" placeholder="Name"><br> 
      <input name="uDFNumber" type="text" id="phone" placeholder="Mobile/Phone Line"><br> 
      <input name="uDFEmail" type="text" id="email" placeholder="Email"><br> 
      <input name="uDFSubject" type="text" id="subject" placeholder="Subject"><br> 
      <textarea name="uDFMessage" placeholder="Message......"></textarea><br> 
      <input type="submit" name="uDFButton" value="Submit" class="btnSubmit" id="test"> 
     </form> 

的Javascript

function submitValidation(){ 
var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value, 
document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value, 
document.forms ["uDF"] ["uDFMessage"].value,] 

var char = ''; // variable used to check whether email has @ 
var x; 
var isEmail = false; 
var isNotEmpty = false; 

//for loop checks email for @ char 
for(x = 0; x<data[2].length;x++) 
{ 
    char = data[2].charAt(x); 
    if(char === "@"){ 
     isEmail = true; 
     break; 
    } 
} 

var i; 

//for loop check if data is collected 
for(i=0;i < 5;i++){ 
    if(data[i] === ""){ 
     isNotEmpty = false; 
    }else{ 
     isNotEmpty = true; 
    } 
} 
if(isEmail === true && isNotEmpty === true) 
{ 
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP 
}else if (!isNotEmpty){ 
    alert('Empty fields'); 
}else if(!isEmail){ 
    alert("Please enter valid email!"); 
} 
} 

PHP

<?php 
$uDFName = $_POST['uDFName']; 
$uDFNumber = $_POST['uDFNumber']; 
$uDFEmail = $_POST['uDFEmail']; 
$uDFSubject = $_POST['uDFSubject']; 
$uDFMessage = $uDFName . "\r\n" . $uDFNumber . "\r\n" . ""; 

// In case any of our lines are larger than 70 characters, we should use 
wordwrap() 
$message = wordwrap($message, 70, "\r\n"); 
mail($uDFEmail, $uDFSubject, $uDFMessage); 

PHP作品，如果我把它的形式行动=（“mail.php）上，但随后ofcourse没有验证将完成。

Answer 1

您的验证完成后

你可以尝试这样的

它会像这样工作。

确认后会调用外部文件php。它会发送您的所有input type表格数据在php文件中与此$('#yourform').serialize()。

，你可以得到你的php文件input form data这样$name = $_POST['name'];

这将工作与以往相同的PHP GET和POST但这里的概念是没有的页面加载。

希望你能理解现在。

function submitValidation(){ 

var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value, document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value, document.forms ["uDF"] ["uDFMessage"].value,]; 

var char = ''; // variable used to check whether email has @ 
var x; 
var isEmail = false; 
var isNotEmpty = false; 

//for loop checks email for @ char 
for(x = 0; x<data[2].length;x++) 
{ 
    char = data[2].charAt(x); 
    if(char === "@"){ 
     isEmail = true; 
     break; 
    } 
} 

var i; 

//for loop check if data is collected 
for(i=0;i < 5;i++){ 
    if(data[i] === ""){ 
     isNotEmpty = false; 
    }else{ 
     isNotEmpty = true; 
    } 
} 
if(isEmail === true && isNotEmpty === true) 
{ 
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP 
    /**** Your Ajax ****/ 
    $.ajax(
    { 
     url: 'yourphpfile.php', 
     type: 'post', 
     data: $("#uDF").serialize(), 
     success: function(response) { 
     console.log(response); 
     } 
    }); 
    return false; 


}else if (!isNotEmpty){ 
    alert('Empty fields'); 
    return false; 
}else if(!isEmail){ 
    alert("Please enter valid email!"); 
    return false; 
} 



} 

Answer 2

试试这个

if(isEmail === true && isNotEmpty === true) 
{ 
//Put below code here 
} 

Ajax请求提交表单

$.ajax({ 
    type:'post', //method may be get or post to send data 
    url:'mail.php', //file name where you will recieve data to precess 
    data:$('#uDF').serialize(), //serialize the form data 
    success:function(){ //executes when mail.php file found 
    //Your success message 
    }, 
    error:function(){ //otherwise error 
    //error message 
    } 
})