Javascript 带有弹出模式成功或失败框的联系人表单

大家好，首先感谢大家给予的帮助。我在这里搜索了数据库，并没有真正找到问题的解决方案。我很难让我的PHP脚本与我的HTML和javascript保持一致。我正在尝试在提交联系人表单时创建一个弹出模式框。用我目前的代码，我只是得到失败框弹出。有人能看到我的编码错误在哪里吗？再次感谢

HTML-

<div class="col-md-7 contact-form">
                    <form action="contact.php" method="post" form id="contact-form">
                        <input type="text" name="Name" placeholder="Name" required>
                        <input type="email" class="email" name="Email" placeholder="Email" required>
                        <textarea placeholder="Message" name="Message" required></textarea>
                        <input type="submit" value="SUBMIT">
                    </form>
                </div>
                <div class="clearfix"> </div>   
            </div>
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">THANKS</h2>
        </div>
        <div class="modal-body text-center" style="background-color: #fff;">
          <p style="font-weight: 600; color: #393939; font-size: 18px;">We will contact you as soon as possible!</p>
        </div>
        <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div id="fail-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Ace Motorcycles</h4>
        </div>
        <div class="modal-body">
          <p>Sorry something went wrong in sending your message. Please try again</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#contact-form").on("submit", function(event) {
        event.preventDefault();

        request = $.ajax({
          url: "process.php",
          type: "post",
          data: $(this).serialize(),
          dataType:"json"
        });

        // Callback handler that will be called on success
        request.done(function (response, textStatus){
          if (response == true ) {
            console.log('true');
            $('#thankyouModal').modal('show');
          } else {
            console.log('false');
            $('#fail-modal').modal('show');
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (textStatus, errorThrown){
          // Log the error to the console
          console.error(
            "The following error occurred: "+ textStatus, errorThrown
          );
        });
      });
    });
  </script>

process.php-

header('Content-Type: application/json');

$sent = false;
if(isset($_POST['submit'])) {     
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "timmy2872@gmail.com";

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $sender = $_POST['Email'];

    $name = $_POST['Name']; // required
    $email = $_POST['Email']; // required
    $message = $_POST['Message']; //required

    $email_message = "Below is the message.\n\n";

    $email_subject = "Contact details - $name";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Name: ".clean_string($name)."\n";
    $email_message .= "Email Address: ".clean_string($email)."\n";
    $email_message .= "Message: ".clean_string($message)."\n";

    // create email headers
    $headers = 'From:'.$sender."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $sent= @mail($email_to, $email_subject, $email_message, $headers); 
}

die(json_encode($sent));

?>

错误就在这里-

     $("#contact-form").on("submit", function(event) {
    event.preventDefault();

如—

     $("#contact").on("submit", function(event) {
     event.preventDefault();

---

您是否使用您使用的浏览器的F12工具检查了任何错误？您好@JeroenHeier是的，我检查了，并且似乎没有任何明显的显示，除非我遗漏了什么。

     $("#contact").on("submit", function(event) {
     event.preventDefault();