AJAX/PHP 表单数据未提交

Question

我正在为一个朋友建立一个网站。他有一个基本的“联系我”部分。我想使用 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 代码sn-p。

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

Answer 1

你错过了数据，因为你只发布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：从表单中删除操作以确保