Question

我在获取表单以正确地通过电子邮件将其内容发送给我时遇到了一些问题，使用ajax来显示感谢信息而不是重新加载。从JS中删除preventDefault（）会使表单正确发送，但显然也会导致页面重定向到PHP文件，这是我不想要的。下面的代码，是否有一些明显我做错了？网站在Wordpress上运行，但我不想使用插件，因为这些似乎添加了破坏表单设计的额外元素。

HTML

<form method="post" action="<?php echo get_template_directory_uri();?>/review-form-handler.php" id="websiteReviewForm">
    <div class="formField">
        <div class="inputEffect">
            <input type="text" name="Website" required>
            <hr>
            <label for="Website">Your Website?</label>
        </div>
        <p>1 / 4</p>
    </div>
    <div class="formField">
        <div class="inputEffect">
            <input type="text" name="Name" required>
            <hr>
            <label for="Name">Your Name?</label>
        </div>
        <p>2 / 4</p>
    </div>
    <div class="formField">
        <div class="inputEffect">
            <input type="text" name="Email" required>
            <hr>
            <label for="Email">Your Email?</label>
        </div>
        <p>3 / 4</p>
    </div>
    <div class="formField">
        <div class="inputEffect">
            <input type="text" name="Phone" required>
            <hr>
            <label for="Phone">Your Phone Number?</label>
        </div>
        <p>4 / 4</p>
    </div>
    <input type="submit" name="submit" value="REVIEW MY WEBSITE">
</form>

JS

$('#websiteReviewForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:$(this).attr('action'),
        type:'post',
        data:$(this).serialize(),
        success:function(){
           $('#websiteReviewForm').hide();
           $('.thankyouMessage').show();
        }
    });
});

PHP

<?php

if($_POST["submit"]) {

$recipient="MY EMAIL";
$subject="Form to email message";
$sender="Visix";
$senderEmail="MY EMAIL";
$website=$_POST["Website"];
$name=$_POST["Name"];
$email=$_POST["Email"];
$number=$_POST["Number"];

$mailBody="Name: $sender\nEmail: $senderEmail\nWebsite: $website\nName: $name\nEmail: $email\nPhone number: $number";

mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
}

?>

Answer 1

问题在于您在PHP中检查表单的方式：

if($_POST["submit"]) {

由于您未通过提交按钮触发的常规机制发布，因此发送到服务器的数据中没有submit条目。（submit按钮的值仅在通过该按钮的激活实际提交表单时发送。）

您可以通过

解决这个问题

添加

<input type="hidden" name="submit" value="x">

...表格

或在序列化后在ajax电话中添加：
```
data: $(this).serialize() + "&submit=x",
```
或只检查已存在的一个或多个其他字段

e.preventDefault with ajax阻止我的表单操作代码工作

1 个答案: