How change PHP Email form (return section) to match with Javascript and html template?

Question

Recently I posted a question PHP Script not send emails and read lots of similar topics on SO like as AJAX JQUERY HTML EMAIL topics but none of them solved my problem.

My problem is that when email is successfully sent (I check it), part of HTML is not run and whole page being refreshed not as main template: (I think I couldn't send response for PHP when send back to HTML). my goal is just change PHP file to works.

In the main template, the result of emails (sent or failed) is done perfect as follows, but in my version there is a problem to show like as this:

HTML:

<div class="alert alert-success hidden animated fadeIn" id="contactSuccess">
   <strong>Success!</strong> Your message has been sent to us.
</div>

<div class="alert alert-danger hidden animated shake" id="contactError">
   <strong>Error!</strong> There was an error sending your message.
</div>

JavaScript:

jQuery(document).ready(function(e) {
    "use strict";
    e("#contact-form").validate({
        submitHandler: function(s) {
            var o = e(s),
                a = e("#contactSuccess"),
                t = e("#contactError"),
                r = e(this.submitButton);
            r.button("loading"), e.ajax({
                type: "POST",
                url: o.attr("action"),
                data: {
                    name: o.find("#name").val(),
                    email: o.find("#email").val(),
                    subject: o.find("#subject").val(),
                    message: o.find("#message").val()
                },
                dataType: "json",
                complete: function(s) {
                    return "object" == typeof s.responseJSON && "success" == s.responseJSON.response ? (a.removeClass("hidden"), t.addClass("hidden"), o.find(".controled").val("").blur().parent().removeClass("has-success").removeClass("has-error").find("label.error").remove(), o.find(".controled").removeClass("error"), a.offset().top - 80 < e(window).scrollTop() && e("html, body").animate({
                        scrollTop: a.offset().top - 80
                    }, 300), r.button("reset"), void e(".controled").keyup(function() {
                        a.addClass("hidden")
                    })) : (t.removeClass("hidden"), a.addClass("hidden"), o.find(".controled").val("").blur().parent().removeClass("has-success").removeClass("has-error").find("label.error").remove(), t.offset().top - 80 < e(window).scrollTop() && e("html, body").animate({
                        scrollTop: t.offset().top - 80
                    }, 300), o.find(".has-success").removeClass("has-success"), r.button("reset"), void e(".controled").keyup(function() {
                        t.addClass("hidden")
                    }))
                }
            })
        }
    })
});

PHP:

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">

        window.location = 'contact_page.html#contactSuccess';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">

        window.location = 'contact_page.html#contactError';
    </script>
<?php
}

Answer 1

Why you just output the url in php side and then in the javascript side you call the script that you want:

PHP Side

$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) {
    echo "{'url':'contact_page.html#contactSuccess'}";
} else {
    echo "{'url':'contact_page.html#contactError'}";
}

Javascript Side

complete: function(){
   ...
   window.location = s.responseJSON.url
   ...
}