Fatal编程技术网
  • php/
  • 未使用Ajax和PHP提交联系人表单

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

php jquery ajax forms

未使用Ajax和PHP提交联系人表单,php,jquery,ajax,forms,Php,Jquery,Ajax,Forms,我正在使用jQuery验证插件、ajax调用为我的站点构建一个联系表单，将数据转发到PHP文件，最后发送电子邮件。数据似乎没有传递到php邮件程序。我是服务器端技术的新手，我读了很多书，但仍然无法使其工作，所以请给我建议 表格： <form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post"> <div class="form-group">

我正在使用
jQuery验证插件
、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>
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);
}
?>
在您的ajax.php中删除
$\u POST[“提交”]

在您的ajax.php中删除
$\u POST[“提交”]



$（表单）.serialize（）不包括
提交
字段（它如何知道您单击了哪个提交按钮？），因此
如果（$\u POST['submit']）
将永远不会成功。使用：


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


相反

或者，如果此脚本仅用于AJAX调用，而不是由浏览器直接加载，则可以完全忽略该检查，如Glizzweb的回答中所示。
$（表单）。serialize（）
不包括
提交
字段（它如何知道您单击了哪个提交按钮？），因此
如果（$\u POST['submit']）
永远不会成功。使用：


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


相反


或者，如果此脚本仅用于AJAX调用，而不是由浏览器直接加载，则可以完全忽略该检查，如Glizzweb的回答所示。
如果满足以下条件，最好使用检查：


  if (isset($_POST['inputName'])){
//rest part here
}


//并查看文件是否在同一目录中，否则给出相对路径

使用此选项发送表单内容：


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



如果出现以下情况，最好使用检查：


  if (isset($_POST['inputName'])){
//rest part here
}


//并查看文件是否在同一目录中，否则给出相对路径

使用此选项发送表单内容：


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页面中，$\u POST['submit']需要删除，因为您使用“$（form）.serialize（）”发布值，而在ajax页面中不发布值。删除if条件“if（$\u POST[“submit”]）{}”，并更改为“if（！empty（$\u POST[“inputName”]）{}”


在ajax页面中，$\u POST['submit']需要删除，因为您使用“$（form）.serialize（）”发布值，而在ajax页面中不发布值。删除if条件“if（$\u POST[“submit”]）{}”，并更改为“if（！empty（$\u POST[“inputName”]）{}”

请尝试以下代码：


<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>




$（文档）.ready（函数（）{
$（#contactForm'）。提交（功能（e）{
e、 预防默认值（）；
$（“#contactForm”）。验证({
规则：{
输入名称：{
要求：正确，
最小长度：2
},
输入电子邮件：{
要求：正确，
电子邮件：真的
},
输入消息：{
必填项：true
}
},
信息：{
姓名：{
必需：“名称值必需”，
minlength:“名称必须至少包含2个字符”
},
电邮：{
必填：“需要电子邮件”
},
信息：{
必选：“消息是必选的”，
最小长度：10
}
},
submitHandler:函数（表单）{
警报（$（'form'）.html（））；
$.ajax({
类型：“POST”，
数据：$（表单）.serialize（），
url:“test1.php”，
成功：函数（）{
警报（“已发送消息”）；
},
错误：函数（）{
警报（“由于错误消息未发送”）；
}
});
}
});
});
});
名称
电子邮件
消息


它正在工作，并显示发送的消息和ajax调用。您在执行ajax调用时犯了一些错误。由于jquery验证插件不提供任何ajaxsubmit函数，所以使用jquery-ajax函数，就像我使用的一样。尝试一下，让我知道进一步的问题

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


<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>




$（文档）.ready（函数（）{
$（#contactForm'）。提交（功能（e）{
e、 预防默认值（）；
$（“#contactForm”）。验证({
规则：{
输入名称：{
要求：正确，
最小长度：2
},
输入电子邮件：{
要求：正确，
电子邮件：真的
},
输入消息：{
必填项：true
}
},
信息：{
姓名：{
必需：“名称值必需”，
minlength:“名称必须至少包含2个字符”
},
电邮：{
必填：“需要电子邮件”
},
信息：{
必选：“消息是必选的”，
最小长度：10
}
},
submitHandler:函数（表单）{
警报（$（'form'）.html（））；
$.ajax({
类型：“POST”，
数据：$（表单）.serialize（），
url:“test1.php”，
成功：函数（）{
警报（“已发送消息”）；
},
错误：函数（）{
警报（“由于错误消息未发送”）；
}
});
}
});
});
});
名称
电子邮件
消息


它正在工作，并显示发送的消息和ajax调用。您在执行ajax调用时犯了一些错误。由于jquery验证插件不提供任何ajaxsubmit函数，所以使用jquery-ajax函数，就像我使用的一样。尝试一下，让我知道进一步的问题


更改此代码以满足您的要求。
$\u使用AJAX时未设置POST['submit']
。是否检查是否调用了AJAX？关于AJAX表单/调用的信息已经足够了。关于这个问题，我已经发布了两个完整的答案，所以还有其他的。@JasonK如果你知道之前的答案是恰当的，就把它标记为重复的。我认为表单是submit而不是ajax。
$\u POST['submit']
是