验证表格并将数据发送到php文件

时间：2016-04-07 19:19:44

标签： javascript php jquery html

我使用Javascript开发验证表单所有人都认为正确

但我希望当Al认为被接受时将信息发送到php文件

我怎么能做到？

HTML代码：

<?php
if(isset($_GET['submit'])){
$message = '';
$email = '';
$name ='';


$message = $_GET['comment'];
$email = $_GET['commentMail'];
$name = $_GET['commentName'];

$to = "emailme";

$subject = 'New Message';

$message = " Le nom : ".$name."<br><br>".$message."<br><br> Email : ".$email;

$header = "$email";

if(mail($to, $subject, $message, $header)){
  echo '<b style="color: green">Messange Send</b>';
}
else{
  echo '<b style="color: red">Sommthing wrong</b>';
}}
?>
<html>
	<head>
		<title>Contact</title>
		<meta charset="UTF-8">
	</head>
	<body onload="randNums()">
		<form>
			<input id="commentName" onkeyup="validateName()" name="name" type="text" placeholder="Name"><label id="commentNamePrompt"></label><br>
			<input id="commentMail" onkeyup="validateMail()" name="mail" type="text" placeholder="Mail"><label id="commentMailPrompt"></label><br>
			<input id="commentPhone" onkeyup="validatePhone()" name="phone" type="text" placeholder="Phone"><label id="commentPhonePrompt"></label><br>
			<textarea id="comment" onkeyup="validateComment()" name="commente" placeholder="Message here"></textarea><label id="commentPrompt"></label><br> 
			<span id="digit1"></span> + 
			<span id="digit2"></span> = 
			<input id="captcha" size="2" onkeyup="validateCaptcha()"><label id="captchaPrompt"></label><br>

		</form>
		<button href="index.php" name="submit" onclick="validateCommentForm()" > Send</button><label id="commentFormPrompt"> </label>
		<script type="text/javascript" src="javascript.js"></script>
	</body>
</html>

js code 

function randNums(){
	var rand = Math.floor(Math.random() * 10) + 1;
	var rand2 = Math.floor(Math.random() * 10) + 1;
	
	document.getElementById("digit1").innerHTML = rand;
	document.getElementById("digit2").innerHTML = rand2;
}

function validateName(){
	var name = document.getElementById("commentName").value;
	if (name.length == 0){
		producePrompt("Name *", "commentNamePrompt", "red");
		return false;
	}
	
	if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/))
	{
		producePrompt("name wrong","commentNamePrompt","red");
		return false;
	}
	
	producePrompt("accept", "commentNamePrompt", "green");
	return true;
}

function validatePhone(){
	var phone = document.getElementById("commentPhone").value;
	
	if(phone.length == 0){
		producePrompt("phone *", "commentPhonePrompt", "red");
		return false;
	}
	
	if(phone.length != 10){
		producePrompt("10 numbers", "commentPhonePrompt", "red");
		return false;
	}
	
	if(!phone.match(/^[0-9]{10}$/))
	{
		producePrompt("phone wrong","commentPhonePrompt","red");
		return false;
	}
	
	producePrompt("Accept", "commentPhonePrompt", "green");
	return true;
}

function validateMail() {
	var mail = document.getElementById("commentMail").value;
	
	if(mail.length == 0){
		producePrompt("mail *", "commentMailPrompt", "red");
		return false;
	}
	
	if(!mail.match(/^[A-Za-z._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/))
	{
		producePrompt("Wrong mail","commentMailPrompt","red");
		return false;
	}
	
	producePrompt("accept", "commentMailPrompt", "green");
	return true;
}

function validateComment(){
	var comment = document.getElementById("comment").value;
	var required = 30;
	var left = required-comment.length;
	
	if (left > 0){
		producePrompt(left + " lettre" ,"commentPrompt","red" );
		return false;
	}
	
	producePrompt("accept", "commentPrompt", "green");
	return true;
}

function validateCaptcha(){
	var captcha = document.getElementById("captcha").value;
	
	var digit1 = parseInt(document.getElementById("digit1").innerHTML);
	var digit2 = parseInt(document.getElementById("digit2").innerHTML);
	
	var sum = digit1 + digit2;
		
	if(captcha.length == 0){
		producePrompt("captcha *", "captchaPrompt", "red");
		return false;
	}
	
	if(!captcha.match(/^[0-9]{1,2}$/) || !captcha.match(sum)){
		producePrompt("Captchas wrong","captchaPrompt","red");
		return false;
	}

	producePrompt("Accept", "captchaPrompt", "green");
	return true;
}

function submitForm(){

    var server = 'http://localhost/test'; // Your PHP file
    var commentName = $('#commentName').val(); // The values of your form
    var commentMail = $('#commentMail').val(); // The values of your form
    var commentPhone = $('#commentPhone').val(); // The values of your form
    var comment = $('#comment').val(); // The values of your form

    $.ajax({ // Here the magic starts
        url: server+"/index.php", // Where this function will send the values
        type:"get", // To get the status of your php file
        data: "action=insertNews&commentName="+commentName+"&commentMail="+commentMail+"&commentPhone="+commentPhone+"&comment="+comment, // The values
        success: function (data){ // After sending the values to your php file you will receive number 1 or 2, if you receives number 1 it means sucess, but if you receives number 2 it means fail.
            if(data == 'Messange Send'){    
                //
            }
            else{
               //
            }
        }
    });
}


function validateCommentForm(){
	if(!validateName() || !validateMail() || !validatePhone() || !validateComment()){
		jsShow("commentFormPrompt");
		producePrompt("Invalide form","commentFormPrompt","red");
		setTimeout(function(){jsHide("commentFormPrompt")}, 2000);
	}
	else 
		submitForm();
}

function jsShow(id){
	document.getElementById(id).style.display = "block";
}

function jsHide(id){
	document.getElementById(id).style.display = "none";
}

function producePrompt(message, promptLocation, color){
	document.getElementById(promptLocation).innerHTML = message;
	document.getElementById(promptLocation).style.color = color;
}

那是我的代码，带有HTML的PHP​​代码，以及带有Ajax的javascript但是当我点击提交按钮时没有任何反应，任何解决方案？

2 个答案:

答案 0 :(得分：0)

function validateCommentForm(){
    if(!validateName() || !validateMail() || !validatePhone() || !validateComment()){
        jsShow("commentFormPrompt");
        producePrompt("Invalide Form ","commentFormPrompt","red");
        setTimeout(function(){jsHide("commentFormPrompt")}, 2000);
    }
    else 
        submitForm();
}


function submitForm(){

    var server = 'url'; // Your PHP file
    var commentName = $('#commentName').val(); // The values of your form
    var commentMail = $('#commentMail').val(); // The values of your form
    var commentPhone = $('#commentPhone').val(); // The values of your form
    var comment = $('#comment').val(); // The values of your form

    $.ajax({ // Here the magic starts
        url: server+"/api.php", // Where this function will send the values
        type:"get", // To get the status of your php file
        data: "action=insertNews&commentName="+commentName+"&commentMail="+commentMail+"&commentPhone="+commentPhone+"&comment="+comment, // The values
        success: function (data){ // After sending the values to your php file you will receive number 1 or 2, if you receives number 1 it means sucess, but if you receives number 2 it means fail.
            if(data == 'Messange Send'){    
                // sucess code
            }
            else{
                // fail code
            }
        }
    });
}

编辑：如果成功，你需要在你的php echo中回显一个数字1，如果失败，你需要在数字2中回显。

PHP 

$message = $_GET['comment'];
$email = $_GET['commentMail'];
$name = $_GET['commentName'];

$to = "$email";

$subject = 'New Message';

$message = " Le nom : ".$name."<br><br>".$message."<br><br> Email : ".$email;

$header = "$email";

if(mail($to, $subject, $message, $header)){
  echo '<b style="color: green">Messange Send</b>';
}
else{
  echo '<b style="color: red">Sommthing wrong</b>';
}

答案 1 :(得分：0)

因此，AJAX旨在通过使网页在用户工作时透明地对服务器进行异步调用来创建更多功能和交互式Web应用程序。 AJAX是一个工具，Web开发人员可以使用它来创建更智能的Web应用程序，在与人类交互时，它比传统的Web应用程序更好。

AJAX所采用的技术已经在所有现代Web浏览器中实现，例如Mozilla Firefox，Internet Explorer或Opera，因此客户端不需要安装任何额外的模块来运行AJAX网站。 AJAX由以下内容组成：

  • JavaScript是AJAX的基本要素，允许您使用 构建客户端功能。在您的JavaScript函数中 您将大量使用文档对象模型（DOM） 操纵HTML页面的各个部分。
  • XMLHttpRequest对象允许JavaScript访问服务器 异步，以便用户可以继续工作 功能在后台执行。访问服务器 只是意味着为文件或脚本发出简单的HTTP请求 位于服务器上。 HTTP请求很容易制作，并且不会导致 任何与防火墙有关的问题。
  • 需要服务器端技术来处理来的请求 来自JavaScript客户端。在本书中，我们将使用PHP来执行 服务器端的部分工作。

对于客户端 - 服务器通信，部件需要一种传递数据和理解数据的方法。传递数据是一个简单的部分。访问服务器的客户端脚本（使用XMLHttpRequest对象）可以使用GET或POST发送名称 - 值对。使用任何服务器脚本读取这些值非常简单。 服务器脚本只是通过HTTP发回响应，但与通常的网站不同，响应的格式可以简单地由客户端上的JavaScript代码解析。

建议的格式是XML，它具有广泛支持的优势，并且有许多库可以轻松地操作XML文档。但是如果你愿意，你可以选择另一种格式（你甚至可以发送纯文本），一种流行的XML替代方法是JavaScript Object Notation（JSON）。

旧学校风格的简单例子：

HTML 

<html>
  <head>
    <title>AJAX with PHP: Quickstart</title>
  </head>
  <body onload='process()'>
    Server wants to know your name:
    <input type="text" id="myName" />
    <div id="divMessage"></div>
  </body>
</html>

魔术师 

// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject() {
    // will store the reference to the XMLHttpRequest object
    var xmlHttp;
    // if running Internet Explorer
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    }
// if running Mozilla or other browsers
    else {
        try {
            xmlHttp = new XMLHttpRequest();
        }
        catch (e) {
            xmlHttp = false;
        }
    }
// return the created object or display an error message
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process() {
// proceed only if the xmlHttp object isn't busy
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
// retrieve the name typed by the user on the form
        name = encodeURIComponent(document.getElementById("myName").value);
// execute the quickstart.php page from the server
        xmlHttp.open("GET", "**yourPHPfiletoretrievedata**.php?name=" + name, true);
// define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
        xmlHttp.send(null);
    }
    else
// if the connection is busy, try again after one second
        setTimeout('process()', 1000);
}
// executed automatically when a message is received from the server
function handleServerResponse() {
// move forward only if the transaction has completed
    if (xmlHttp.readyState == 4) {
// status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200) {
// extract the XML retrieved from the server
            xmlResponse        = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
            xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
            helloMessage = xmlDocumentElement.firstChild.data;
// update the client display using the data received from the server
            document.getElementById("divMessage").innerHTML =
                '<i>' + helloMessage + '</i>';
// restart sequence
            setTimeout('process()', 1000);
        }
// a HTTP status different than 200 signals an error
        else {
            alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
    }
}
相关问题
最新问题