我正在使用jQuery validation plugin
,ajax调用将数据转发到PHP文件,最后发送电子邮件,为我的网站构建联系表单。似乎数据没有传递给 php 邮件程序。我是服务器端技术的新手,我读了很多书,但仍然无法使其工作,所以请告诉我。
形式:
<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="email" placeholder="your@email.com" type="email" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" required></textarea>
<button class="btn btn-success pull-right" type="submit" name="submit" id="submit">Send</button>
</div>
</div>
JavaScript:
/*validate contact form */
$(function() {
$('#contactForm').validate({
rules: {
inputName: {
required: true,
minlength: 2
},
inputEmail: {
required: true,
email: true
},
inputMessage: {
required: true
}
},
messages: {
name: {
required: "name required",
minlength: "name must be at least 2 characters"
},
email: {
required: "email required"
},
message: {
required: "message required",
minlength: 10
}
},
submitHandler: function(form) {
$('form').ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"index2.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
});
});
PHP文件:
<?php
if ($_POST["submit"]) {
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
$message = $_POST['inputMessage'];
$from = 'Demo Contact Form';
$to = 'example@example.com';
$subject = 'Message from Contact Demo ';
$body = "From: $name'n E-Mail: $email'n Message:'n $message";
mail($to, $subject, $body, $from);
}
?>
$(form).serialize()
不包括submit
字段(它怎么知道你点击了哪个提交按钮?(,所以if ($_POST['submit'])
永远不会成功。用:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
相反。
或者,如果此脚本仅用于 AJAX 调用,而不是由浏览器直接加载,则可以完全省略该检查,如 Glizzweb 的答案所示。
最好使用检查:
if (isset($_POST['inputName'])){
//rest part here
}
并查看文件是否在same directory
否则给出相对路径。
使用此选项发送表单内容:
submitHandler: function() {
$('form').ajaxSubmit({
type:"POST",
data: $('#contactForm').serialize(),
url:"submit.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
在你的 ajax 中.php删除$_POST["submit"]
<?php
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
$message = $_POST['inputMessage'];
$from = 'Demo Contact Form';
$to = 'example@example.com';
$subject = 'Message from Contact Demo ';
$body = "From: $name'n E-Mail: $email'n Message:'n $message";
mail($to, $subject, $body, $from);
?>
在 ajax 页面中 $_POST['submit'] 需要删除,因为您使用 "$(form(.serialize((" 发布值
,并且 In 你没有将值发布到 ajax 页面。 删除 if 条件 "if ($_POST["submit"]( {}" 并像这样更改 "if (!empty($_POST["inputName"](( { }">
$name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
.....
....
....
试试这段代码:
<html>
<head>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
$('#contactForm').validate({
rules: {
inputName: {
required: true,
minlength: 2
},
inputEmail: {
required: true,
email: true
},
inputMessage: {
required: true
}
},
messages: {
name: {
required: "name value required",
minlength: "name must be at least 2 characters"
},
email: {
required: "email is required"
},
message: {
required: "message is required",
minlength: 10
}
},
submitHandler: function(form) {
alert($('form').html());
$.ajax({
type:"POST",
data: $(form).serialize(),
url:"test1.php",
success: function() {
alert("message sent");
},
error: function() {
alert("due to an error msg wasnt sent");
}
});
}
});
});
});
</script>
</head>
<body>
<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="email" placeholder="your@email.com" type="email" value="" >
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" ></textarea>
<input class="btn btn-success pull-right" type="submit" name="submit" id="submit" value="Send">
</div>
</div>
</body>
</html>
它正在工作并显示发送的消息和ajax调用。 您在执行 ajax 调用时犯了一些错误。 由于 jquery 验证插件不提供任何 ajaxsubmit 函数,而是像我使用的那样使用 jquery ajax 函数。 尝试一下,让我知道进一步的问题。
更改此代码以满足您的要求。