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:

enter image description here

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
}

Seeing that the JS part contains `complete: `, this presumably is the success handler for some AJAX request? And you expect some `responseJSON` property to exist on the response? If so - why? Your PHP code that you have shown (and that I’m assuming is what responds to the AJAX request) doesn’t respond with JSON - it outputs HTML code, a `script` element to be precise. — 04FS, May 24 '19 at 12:18
@04FS I'm a novice in this fields. I want to create my own site with one templates that PHP-contact-form is absent in this template. how I can solve the problem? would you please more clearly for me? — , May 24 '19 at 12:20

score 1 · Accepted Answer · edited May 24 '19 at 16:41

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
   ...
}

edited May 24 '19 at 16:41

James

20,957
5
26
41

answered May 24 '19 at 12:38

Fernando Perez

66
1
9

@James I test it. echo works and display on screen, I think I should return success because we see in JS return "object" == typeof s.responseJSON && "success" ? am I right? my problem not solved ! – May 24 '19 at 14:35
@James I correct and I think now correct I test via this code: if ($mail_status) { echo "{'url':'index.html#contactSuccess'}"; } else { echo "{'url':'index.html#contactError'}"; }' – May 24 '19 at 14:41
@James infact I dont want change JS I want to change just PHP to match with this JS. this is my goals. – May 24 '19 at 14:42
@James would you please help me? really I sad. – May 24 '19 at 16:37
if you change only the php method, try to use this: < ?php header("Location: {URL}"); ?> where the {{URL}} is the contact_page.***. Please be sure don't make any output before call this method. – Fernando Perez May 24 '19 at 19:21

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

HTML:

JavaScript:

PHP:

1 Answers1

Linked