Php Mailer custom message not showing after mail event

Question

This is stumping me and I can't figure it out. Help is needed, please. I have custom messages for both mail processing success and failure. I can test-display any of the messages within the document ready script, but it wouldn't work in the javascript script from the body. Below is the relevant parts of the code.

<?php

    session_start();
      
    if (mail($to, $subject, $message, $headers)) {
        ?>
           <script language="javascript">
           //This works
                alert("Email sent);

           //Not working
                $("#main").css('display', 'none');
                $("#emailSuccess").css('display', 'block');
                $("#emailError").css('display', 'none');       
           </script>
        <?php
    } else {
        ?>
           <script language="javascript">                   
                //This works
                alert("Email failed);

           //Not working
                $("#main").css('display', 'none');
                $("#emailGood").css('display', 'none');
                $("#emailBad").css('display', 'block');
           </script>
        <?php
    }
?>

<!DOCTYPE html>
<html lang="en-US">
    <head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    (etc)
    </head>
    <body class="w3-content" style="max-width:1600px">
        <div id="page-wrap">

        <!—Success Msg 
<div id="emailGood" style="display:none">                                               <h3>We received your email.</h3>
</div>


        <!—Error Msg 
<div id="emailBad" style="display:none">                                               <h3>We received your email.</h3>
</div>


            <div id="main">
                <form action="mymail.php" method="post" id="change-form">        
            …. (form elements)
                </form>
            <div>

        </div>

        <script>
            $(document).ready(function() {
                $("#main").css('display', 'none');
                $("#emailGood ").css('display', 'block');
                $("#emailBad ").css('display', 'none');
            })
        </script>

    </body>
  </html>

You should try looking into AJAX. That way you could just have some JS that runs after the form gets submitted and then it will return as `done` or `fail`. Have a look at a beginners tutorial [here](https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery). — davidroseboom, Sep 02 '21 at 00:04
Please see my comment below. I can send the message quite fine. The problem is being able to display a message by showing a
id after the email processed. — Melon, Sep 02 '21 at 03:25
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — CBroe, Sep 02 '21 at 08:24
_" can test-display any of the messages within the document ready script, but it wouldn't work in the javascript script from the body."_ - and you can't manage to come to the pretty obvious conclusion then, that the latter should probably be wrapped into document.ready as well then? (And the position where those scripts are output, should be changed anyway - they have no place coming before the doctype of the document even.) — CBroe, Sep 02 '21 at 08:26
Thanks, CBroe. The referenced question looks promising and so does your suggestion. I'll check both out. — Melon, Sep 06 '21 at 05:27

score 0 · Answer 1 · answered Sep 02 '21 at 00:23

This is my sample code which might be solve your problem

This is PHP mailer code in part (function send()). You have to check is email successfully sent or not. Lets we name this file as email.php

    if(!$mail->send())
    {
    
        echo json_encode (array("status"=>"error",
            "text" => "Mailer Error: " . $mail->ErrorInfo,
            ));
        
    }
    else {
          echo json_encode (array("status"=>"correct",
            "text" => "your email has been sent",
          ));
    }

You have to create ajax to execute and collect result from file that run PHP Mailer Code.

function ProcessEmail (){

    // var data = (items);
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {

        if ((this.readyState == 4) && (this.status == 200)){
            console.log (this.responseText);

            var result =  JSON.parse (this.responseText);

            // Check if sending email failed or not
            if (result.status == "correct") {
                // DO what ever you want in condition you email not failed

            }
            else {
                // Condtion error
            }
        }
      };
      xhttp.open("GET", "email.php?data=data-that-you-want-to-send-through-GET", true);
      xhttp.send();
}

Thanks. I'm actually not having a problem with sending the email. The problem is that though I can display the message that I want when the document loads and also show a javascript alert message after the email is sent, yet I can't show the message designated in the id from the same location where I can display an alert message. It's just weird. — Melon, Sep 02 '21 at 03:18
where did you place your JS script ? on the `` tag or on the last `` tag ? — Muhammad Farras Ma'ruf, Sep 03 '21 at 18:32
Thanks, Muhammad. The JS script was placed BEFORE the last tag. — Melon, Sep 05 '21 at 20:40

Php Mailer custom message not showing after mail event

1 Answers1