Howtoconnecttwosimilarformsinabootstrapwebsitewiththesamejavascriptwebsite

In a bootstrap 4 website. I have 2 similar forms, one in the header and one in the footer. The One in the header submits contact.php file and contact.js file correctly. So it shows a message confirming that the message has been sent on the same page.

While the form in the footer submits contact.php and redirects to a new page, which means it doesn't run contact.js file.

How can I make the Second Form run the javascript file so it submits on the same page?

Here is my form PHP code:

<?php 

$from = 'example@email.com';

$sendTo = 'marketing@abalkhailrealestate.com';

$subject = 'New message from contact form';

$fields = array('name' => 'Name', 'email' => 'Email', 'phone' => 'Phone', 'interest' => 'Interested in'); 

$okMessage = 'تم ارسال طلبك بنجاح، سيتواصل معك وسيط عقاري مرخص في خلال 24 ساعة.';

// If something goes wrong, we will display this message.
$errorMessage = 'يرجى اعادة المحاولة';


error_reporting(0);
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 Abalkhail Website Form";

    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 {
    echo $responseArray['message'];
}
?>

Here is my JavaScript Form Code:

$(function () {

    // init the validator
    // validator files are included in the download package
    // otherwise download from http://1000hz.github.io/bootstrap-validator

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


    // when the form is submitted
    $('#contact-form').on('submit', function (e) {

        // if the validator does not prevent form submit
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            // POST values in the background the the script URL
            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    // data = JSON object that contact.php returns

                    // we recieve the type of the message: success x danger and apply it to the 
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

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

                    // If we have messageAlert and messageText
                    if (messageAlert && messageText) {
                        // inject the alert to .messages div in our form
                        $('#contact-form').find('.messages').html(alertBox);
                        // empty the form
                        $('#contact-form')[0].reset();
                    }
                }
            });
            return false;
        }
    })
});