Question

我正在使用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);
}
?>

Answer 1

$(form).serialize()不包含submit字段（如何知道您点击了哪个提交按钮？），因此if ($_POST['submit'])永远不会成功。使用：

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

代替。

或者，如果此脚本仅用于AJAX调用，而不是由浏览器直接加载，则可以完全省略该检查，如Glizzweb的答案。

Answer 2

在你的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);
?>

Answer 3

更好地使用检查是否：

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

Answer 4

在ajax页面$ _POST ['submit']需要删除，因为你使用“$（form）.serialize（）”发布值并且你没有将值发布到ajax页面。删除条件“if（$ _POST [”submit“]）{}”并改变如此“if（！empty（$ _ POST [”inputName“]））{}”

 $name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
.....
....
....

Answer 5

试试这段代码：

<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函数，因为我已经使用过。尝试一下，让我知道进一步的问题。

更改此代码以符合您的要求。

联系表单不使用Ajax和PHP提交

5 个答案: