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代码片段。

//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：从表单中删除操作只是为了确保