Not getting back the success message from the server side API

Question

I am writing a script that sends an email from a contact form.

The email is being sent from the server and everything is working fine, but I am not being able to get back the success result from the server so I can display a success message that the email has been sent. I am trying to reveal a success message beneath the form when the email is sent successfully

    <form  id="myForm">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <input id="name" type="text" name="name" placeholder="Name">
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <input id="email" type="email" name="email" placeholder="Email">
                                                    </div>
                                                </div>
                                                <input id="subject" type="text" name="subject" placeholder="Subject">
                                                <textarea id="message" name="message" placeholder="Message"></textarea>
                                                <!-- <input type="submit" id="submit" value="Send Message" class="btn"> -->
                                                <button onclick= sendEmail() type="submit"  class="btn" id="submit">Send Message</button>
                                                <div id="resultmessage">
                                                    <div class="error"></div>
                                                    <div class="success"></div>
                                                </div>
                                            </form>

<script type="text/javascript">
        function sendEmail() {
            var name = $("#name");
            var email = $("#email");
            var subject = $("#subject");
            var message = $("#message");

            if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(message)) {
                $.ajax({
            

                    url: 'https://.../send-email'
                    type: 'POST',
                    headers: {
                    'Accept': 'application/json',
    },
                    data: {
                        name: name.val(),
                        email: email.val(),
                        subject: subject.val(),
                        message: message.val()
                        },
                        

                        success: function (response) {
                            console.log("email sent");
                            if(response.success){
                            $('.success').text(response.message);
                            $('#myForm')[0].reset();
                            
        }
                        
                   }
                    

server.use(express.urlencoded({ extended: true })); 



router.post("/", (req, res) => {
  let transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465,
    secure: true,
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD,
    },
  });


  let name = escape(req.body.name);
  let email = escape(req.body.email);
  let subject = escape(req.body.subject);
  let message = escape(req.body.message);


  let mailOptions = {
    to: "testemail@gmail.com",  
    subject: req.body.subject, 
    html: `Name: ${name} <br> Email: ${email} <br> Subject: ${subject} <br> Message: ${message}`
  };



  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.log(error);
      return res.status(500).send("Error sending email");
    }
    res.status(200).send({message: "Email sent!!!!!", success: true});
    console.log(`Message sent: ${info.response}`);
    
  });
});```

Answer 1

Try

router.post("/", async(req, res) => {

and

 try {
    const info = await transporter.sendMail(mailOptions);
    res.status(200).send({message: "Email sent!!!!!", success: true});
    console.log(`Message sent: ${info.response}`);
 } catch (error) {
    console.log(error);
    return res.status(500).send("Error sending email");
}

You're performing an asynchronous activity in sendMail , but the response to the browser has already been processed by the time sendMail returns.