联系表格指向contact.php，但我不希望它重定向。 （发送 email 确实有效）

Question

Dont worry, I have already searched a lot of places and tried to watch other forums and videos. Im not trying to make it easy.

When I submit a form on my page it redirect to www.mypag.com/contact.php . Im trying to use AJAX so that the form will be sent and the page doesnt redirect. Thank you in advance..

                <form id="contact-form" method="post" action="contact.php" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_name">Fornavn *</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Dit fornavn *" required="required" data-error="Fornavn kræves.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_lastname">Efternavn *</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Dit efternavn *" required="required" data-error="Efternavn kræves.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_email">Email *</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Din email *" required="required" data-error="Gyldig email kræves.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_number">Dit nummer </label>
                                <input id="form_number" type="text" name="number" class="form-control" placeholder="Dit telefonnummer (ikke et krav) ">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="form_message">Besked *</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Din besked *" rows="4" required="required" data-error="Vær venlig og skriv en besked før du sender."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-success btn-send" value="Send besked">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

This is my JS

    $(function () {
$('#contact-form').validator();

$('#contact-form').on('submit', function (e) {

    if (!e.isDefaultPrevented()) {
        var url = "index.html";

        // POST values in the background the the script URL
        $.ajax({
            type: "POST",
            url: 'https://andreas.xn--hjorhy-fya.dk/',
            data: $(this).serialize(),
            success: function (data) {
              
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;


                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';

               
                if (messageAlert && messageText) {
                    $('#contact-form').find('.messages').html(alertBox);
                    $('#contact-form')[0].reset();
                }
            }
        });
        return false;
    }
})

This is my PHP

<?php

    $from = 'Demo contact form <demo@domain.com>';
    $sendTo = 'Demo contact form <MYEMAILHERE>';
    $subject = 'New message from contact form';
    $fields = array('name' => 'Name', 'surname' => 'Surname', 'need' => 'Need', 'email' => 'Email',                 
    'message' => 'Message');
    $okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
    $errorMessage = 'There was an error while submitting the form. Please try again later';
    error_reporting(E_ALL & ~E_NOTICE);
    try
    {
        if(count($_POST) == 0) throw new \Exception('Form is empty');
        $emailText = "You have a new message from your contact         
    form\n=============================\n";
        foreach ($_POST as $key => $value) {
            if (isset($fields[$key])) {
                $emailText .= "$fields[$key]: $value\n";
            }
        }
        $headers = array('Content-Type: text/plain; charset="UTF-8";',
            'From: ' . $from,
            'Reply-To: ' . $from,
            'Return-Path: ' . $from,
        );
        mail($sendTo, $subject, $emailText, implode("\n", $headers));
        $responseArray = array('type' => 'success', 'message' => $okMessage);
    }
    catch (\Exception $e)
    {
        $responseArray = array('type' => 'danger', 'message' => $errorMessage);
    }
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) ==         
    'xmlhttprequest') {
        $encoded = json_encode($responseArray);
        header('Content-Type: application/json');
        echo $encoded;
    }
    // else just display the message
    else {
        echo $responseArray['message'];
    }

Thanks in advance for everyone that makes time to help me or redirect me to somewhere that might fix this problem..

*** EDIT ***

This is my whole HTML page, with all the scripts etc. As for now I've moved some scripts before my form, but that didnt help. Im currenty looking for through the logs as plesk web host edition doesnt provice developer console.. only the SSH server does (which i for some reason cant access) As for now, the message is still sent and I recieve them, but Im redirected to contact.php (I dont want a redirect, I want to stay on the same page because I only have 1 page on my website)

  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Andreas Hjorhøy Rasmussen</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700%7CRoboto:400,700,300">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
<link rel="stylesheet" href="vendor/animate.css/animate.css">
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<link rel="stylesheet" href="css/custom.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

  <!--here i have my whole sebsite.. information, pictures, blog etc -->
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
  <script src="contact.js"></script>

  <!-- Kontakt-->
  <section id="contact" data-animate="bounceIn" class="contact-section contact">
      <div class="row" data-animate="fadeInUp">
          <div class="col-md-12">
              <div class="heading text-center">
                  <h2>Kontakt mig</h2>
              </div>
          </div>
          <div class="col-md-8 mx-auto" data-animate="fadeInUp">
              <form id="contact-form" method="post" action="contact.php" role="form">
                  <div class="messages"></div>
                  <div class="controls">
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="form_name">Fornavn *</label>
                                  <input id="form_name" type="text" name="name" class="form-control" placeholder="Dit fornavn *" required="required" data-error="Firstname is required.">
                                  <div class="help-block with-errors"></div>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="form_lastname">Efternavn *</label>
                                  <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Dit efternavn *" required="required" data-error="Lastname is required.">
                                  <div class="help-block with-errors"></div>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="form_email">Email *</label>
                                  <input id="form_email" type="email" name="email" class="form-control" placeholder="Din email *" required="required" data-error="Valid email is required.">
                                  <div class="help-block with-errors"></div>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="form_number">Dit nummer </label>
                                  <input id="form_number" type="text" name="number" class="form-control" placeholder="Dit telefonnummer (ikke et krav) ">
                                  <div class="help-block with-errors"></div>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-12">
                              <div class="form-group">
                                  <label for="form_message">Besked *</label>
                                  <textarea id="form_message" name="message" class="form-control" placeholder="Din besked *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                                  <div class="help-block with-errors"></div>
                              </div>
                          </div>
                          <div class="col-md-12">
                              <input type="submit" class="btn btn-success btn-send" value="Send besked">
                          </div>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </section>

    <!-- Had to remove footer because of personal links -->
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/jquery.cookie/jquery.cookie.js"></script>
  <script src="vendor/owl.carousel/owl.carousel.min.js"></script>
  <script src="vendor/waypoints/lib/jquery.waypoints.min.js"></script>
  <script src="vendor/jquery.counterup/jquery.counterup.js"></script>
  <script src="js/front.js"></script>

Answer 1

You have 2 copies of jQuery in your page. This can cause errors, conflicts and other unexpected behaviour, especially if they are not the same version of jQuery. And even if it didn't, it's inefficient and unnecessary.

I suggest removing the second one ( vendor/jquery/jquery.min.js ).