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


Contact form not submitting using Ajax and PHP

我正在使用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 函数。 尝试一下,让我知道进一步的问题。

更改此代码以满足您的要求。