AJAX / PHP表单数据未提交

时间:2017-04-15 20:42:56

标签: php jquery ajax

我正在为朋友建立一个网站。他有一个基本的“与我联系”部分。我想用AJAX和PHP来提交表单。

这是表单html。

div class="contactme" id="contactme">  
        <form class="form-horizontal" method="post" name="myemailform" id="myform" action="form-to-email.php">
          <fieldset>
            <h2>Let's Create Together</h2>
            <hr class="small">
            <div class="form-group">
              <label class="col-lg-2 control-label">Name</label>
              <div class="col-lg-10">
                <input type="text" class="form-control" id="name" name="name" placeholder="Name">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">E-Mail</label>
              <div class="col-lg-10">
                <input type="email" class="form-control" id="email" name="visitor_email" placeholder="E-Mail">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">Message</label>
              <div class="col-lg-10">
                <textarea class="form-control" rows="8" name="message"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-10 col-lg-offset-2">
                <button type="reset" class="btn btn-default">Cancel</button>
                <button type="submit" name="submit" id="submitbutton" class="btn btn-primary mainButton">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
</div>

这是jquery AJAX代码片段。

//AJAX FORM SUBMISSION
$(document).ready(function(){
            $('#submitbutton').on('submit', function(){
                //Stop the form from submitting itself to the server.
                e.preventDefault();
                var name = $('#name').val();
                var email = $('#email').val();
                $.ajax({
                    type: "POST",
                    url: 'form-to-email.php',
                    data: {name: email},
                    success: function(){
                        alert(data);
                    }
                });
            });
        });

这是我的PHP文件,通过电子邮件发送用户的回复。

    <?php
if (!isset ($_POST ['submit']))
{
    //This page should not be accessed directly. Need to submist the form. 
    echo "error, you need to submit the form!";
}

$name = $_POST ['name'];
$visitor_email = $_POST ['visitor_email'];
$message = $_POST ['message'];

//Validation

if(empty ($name)||empty ($visitor_email))
{
    echo "Name and email are mandatory!";
    exit();
}

else {
    echo "Submit Successful!";
    header("Location: index.html");
    exit(); 
}


$email_from = 'info@joshkelley.video'; //<== Put your email address here
$email_subject = "New Form Submission";
$email_body = "You have received a new message from the user $name.\n".
    "E-mail Address: $visitor_email\n".
    "Here is the message: $message\n".

$to = "brandontetrick@gmail.com"; // <==Put your email address here
$headers = "From: $email_from \r\n"; 

//Send the email! 

mail($to,$email_subject,$email_body,$headers);
//done


?>

总体目标是基本提交“与我联系”消息,但用户不会离开该页面。每次按下提交按钮,我的验证都会失败,我会收到“姓名和电子邮件是强制性的!”信息。

如果您想看看,该网站是现场直播。仍在进行中。 joshkelley.video

1 个答案:

答案 0 :(得分:0)

您错过了数据,因为您只发布了name

$(document).ready(function(){
    $('#submitbutton').on('submit', function(e){
       //Stop the form from submitting itself to the server.
         e.preventDefault();
            var name = $('#name').val();
            var email = $('#email').val();
            $.ajax({
               type: "POST",
               url: 'form-to-email.php',
               data: {name: name, email: email}, /* there was your mistake */
               success: function(reponse){
                   alert(response);
                   window.location.href = 'index.html'; /* wherever you need */
                }
            });
        });
    });

编辑:我认为(从您的其他帖子中)您希望用户被重定向,请不要尝试使用form-to-email.php,而是根据回复。

编辑II:从表单中删除操作以确保