Javascript 提交联系人表单，不使用Ajax重新加载页面

我遵循一个指南构建一个引导联系人表单，并通过mail.php提交它，而不必使用ajax重新加载页面。在我尝试实现ajax之前，我能够使表单正常工作。我被卡住了，因为说明书不清楚到底需要替换哪些代码，以及新代码应该放在哪里。以下是我所遵循的指南和我所停留的部分的链接：

这是我试图让它工作的网站：

我对php不太熟悉，所以我想这就是我搞砸的地方

以下是我使用的确切代码：

HTML

<section class="section">
                        <h2 class="section-heading  text-muted h4 pt-4">Free Consultation</h2>
                        <!--CONTACT DESCRIPTION-->
                        <p class="section-description">Are you ready to turn your vision into a reality? Fill out the contact form below and a member of our team will get back to you as soon as possible. Let's bring your idea to life!</p>
                        <div class="row">
                            <div class="col-12">
                                <form id="contact-form" name="contact-form" action="mail.php" method="POST">
                                    <div class="row">
                                        <!--NAME INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="name" name="name" class="form-control" placeholder="* NAME" required>
                                                <label for="name" class=""></label>
                                            </div>
                                        </div>

                                        <!--EMAIL INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="email" name="email" class="form-control" placeholder="* EMAIL" required>
                                                <label for="email" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!-- PHONE NUMBER INPUT -->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="clientPhone" name="clientPhone" class="form-control" placeholder="PHONE" required>
                                                <label for="phone number" class=""></label>
                                            </div>
                                        </div>

                                        <!--SUBJECT INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="subject" name="subject" class="form-control" placeholder="* SUBJECT" required>
                                                <label for="subject" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!--MESSAGE INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <textarea type="text" id="message" name="message" rows="3" class="form-control md-textarea" placeholder="* MESSAGE" required></textarea>
                                                <label for="message"></label>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                                <!-- SUBMIT BUTTON -->
                                <div class=" col-3 offset-3 offset-md-4 mb-4">
                                    <button class="btn btn-warning" onclick="validateForm()">Send <i class="fa fa-paper-plane ml-1"></i></button>
                                </div>
                                <div id="status" class="text-muted col-12 col-md-8 offset-md-2 my-1"></div>
                            </div>

免费咨询
您准备好将愿景变为现实了吗？请填写下面的联系表，我们团队的一名成员将尽快与您联系。让我们把你的想法付诸实践
发送

JS

function validateForm() {
var name = document.getElementById('name').value;
if (name == "") {
    document.getElementById('status').innerHTML = "Name cannot be empty";
    return false;
}
var email = document.getElementById('email').value;
if (email == "") {
    document.getElementById('status').innerHTML = "Email cannot be empty";
    return false;
} else {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(email)) {
        document.getElementById('status').innerHTML = "Email format invalid";
        return false;
    }
}

var subject = document.getElementById('subject').value;
if (subject == "") {
    document.getElementById('status').innerHTML = "Subject cannot be empty";
    return false;
}
var message = document.getElementById('message').value;
if (message == "") {
    document.getElementById('status').innerHTML = "Message cannot be empty";
    return false;
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
    'name': $('input[name=name]').val(),
    'email': $('input[name=email]').val(),
    'clientPhone': $('input[name=clientPhone]').val(),
    'subject': $('input[name=subject]').val(),
    'message': $('textarea[name=message]').val()

};
document.getElementById('contact-form').submit();

$.ajax({
    url: "mail.php",
    type: "POST",
    data: formData,
    success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message);
        if (data.code) //If mail was sent successfully, reset the form.
            $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        $('#status').text(jqXHR);
    }
});
}

函数validateForm（）{
var name=document.getElementById（'name'）。值；
如果（名称==“”）{
document.getElementById（'status'）.innerHTML=“Name不能为空”；
返回false；
}
var email=document.getElementById（'email'）。值；
如果（电子邮件==“”）{
document.getElementById（'status'）.innerHTML=“电子邮件不能为空”；
返回false；
}否则{
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]++\]；
如果（！重新测试（电子邮件））{
document.getElementById（'status'）.innerHTML=“电子邮件格式无效”；
返回false；
}
}
var subject=document.getElementById（'subject'）。值；
如果（主题==“”）{
document.getElementById（'status'）.innerHTML=“主题不能为空”；
返回false；
}
var message=document.getElementById（'message'）。值；
如果（消息==“”）{
document.getElementById（'status'）.innerHTML=“消息不能为空”；
返回false；
}
document.getElementById（'status'）.innerHTML=“发送…”；
formData={
'name'：$（'input[name=name]'）。val（），
'email'：$（'input[name=email]'）。val（），
'clientPhone'：$（'input[name=clientPhone]'）。val（），
'subject'：$（'input[name=subject]'）。val（），
'message'：$（'textarea[name=message]'）。val（）
};
document.getElementById（'contact-form'）.submit（）；
$.ajax({
url:“mail.php”，
类型：“POST”，
数据：formData，
成功：函数（数据、文本状态、jqXHR）{
$（'#status'）.text（data.message）；
if（data.code）//如果邮件发送成功，请重置表单。
$（“#联系人表单”）.closest（'form'）.find（“输入[type=text]，textarea”）.val（“”）；
},
错误：函数（jqXHR、textStatus、errorshown）{
$（'#status'）.text（jqXHR）；
}
});
}

MAIL.PHP

<?php
if(isset( $_POST['name']))
  $name = $_POST['name'];
if(isset( $_POST['email']))
  $email = $_POST['email'];
if(isset( $_POST['clientPhone']))
  $clientPhone = $_POST['clientPhone'];
if(isset( $_POST['subject']))
  $subject = $_POST['subject'];
if(isset( $_POST['message']))
  $message = $_POST['message'];

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
  print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
  exit();
}
if ($email === ''){
  print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
  exit();
} else {
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
  print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
  exit();
  }
}
if ($subject === ''){
  print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
  exit();
}
if ($message === ''){
  print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
  exit();
}

//   if ($name === ''){
//     echo "Name cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($email === ''){
//     echo "Email cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   } else {
//     if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
//       echo "Email format invalid.";
//       echo "<br>";
//       echo "<br>";
//       echo "<a href='index.html'>GO BACK</a>";
//       die();
//     }
//   }
//   if ($subject === ''){
//     echo "Subject cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($message === ''){
//     echo "Message cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }

$content="From: $name \n Email: $email \n Phone #: $clientPhone \n Subject: $subject \n Message: $message";
$recipient = "support@crane-tech.net";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

主要问题 主要问题是php代码中缺少一个semcolon（；）和第15行的结尾

其他问题 您的网站正在使用JQuery Slim，

$。Slim版本中不包含ajax

，因此您会因此收到一个错误。要解决这个问题，只需包含完整的JQuery，或者在没有JQuery的情况下执行ajax。

您可能还想去掉这一行：

document.getElementById（'contact-form'）.submit（）

因为当您已经手动提交数据时，它会导致重定向。


您应该删除这些行，因为您已经设置了它们：

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];


无关注：
如果您已经在使用JQuery，那么应该使用它，而不是这样做：

document.getElementById（'status'）


您应该使用：

$（“#状态”）
您似乎没有表单，因此您的
表单数据中没有要发送的数据。例如，您没有
，因此您没有要转换的元素