Run PHP file (PHPMailer to send email through Gmail) in the background and alert on the same page when the email is sent

Question

I am using PHPMailer to send email from my Gmail account to an email from a submitted form on my index.html page. This works perfectly fine. But since I am using the send.php file in the action attribute, the send.php page appears after form submission. I want to stay on the index.html page and let send.php work in the background and alert on the index.html page, when the email is sent.

Note: There isn't any SQL or any database job here. I am using PHPMailer in send.php to send an email from my Gmail account to the user submitted Gmail id in the form.

<form action="send.php" class="form" id="frm-js" method="POST">

    <div class="form__group">
        <input type="text" class="form__input" id="name" name="name" placeholder="Full Name" required>
        <label for="name" class="form__label">Full Name</label>
    </div>

    <div class="form__group">
        <input type="text" class="form__input" id="email" name="email" placeholder="Email Address" required>
        <label for="email" class="form__label">Email Address</label>
    </div>

    <div class="form__group">
        <input type="text" class="form__input" id="phone" name="phone" placeholder="Phone Number">
        <label for="phone" class="form__label">Phone Number</label>
    </div>

    <div class="form__group">
        <textarea id="message" rows="4" cols="50" name="message" class="textarea-frm form__input" maxlength="1000" placeholder="Your message"></textarea>
    </div>

    <div class="form__group">
        <button class="btn" type="submit" name="submit">Book</button>
    </div>

</form>

Answer 1

You can use jQuery. Try this: remove action from the form tag. I add a p to show the message from send.php:

<form class="form" id="frm-js" method="POST">

    <p id="resp_msg"></p>
    <div class="form__group">
        <input type="text" class="form__input" id="name" name="name" placeholder="Full Name" required>
        <label for="name" class="form__label">Full Name</label>
    </div>
    <div class="form__group">
        <input type="text" class="form__input" id="email" name="email" placeholder="Email Address" required>
        <label for="email" class="form__label">Email Address</label>
    </div>
    <div class="form__group">
        <input type="text" class="form__input" id="phone" name="phone" placeholder="Phone Number">
        <label for="phone" class="form__label">Phone Number</label>
    </div>

    <div class="form__group">
        <textarea id="message" rows="4" cols="50" name="message" class="textarea-frm form__input" maxlength="1000" placeholder="Your message"></textarea>
    </div>
    <div class="form__group">
        <button class="btn" type="submit" name="submit">Book</button>
    </div>

</form>

And add a jQuery function (integrate jQuery if you haven't already library):

  $("#frm-js").on("submit", function(event){
    event.preventDefault();
    var data = $( this ).serialize();

    $.post("send.php",{data:data }, function (data) {
        // Do other stuff like
        // reset form items

        // Show message response
        $("#resp_msg").text(data).show();
    });

  });

This is send.php and is how it should be:

if(isset($_POST['data'])) {

    $params = array();
    parse_str($_POST['data'], $params);

    // Send mail

    echo "Hi, " . $params['name'] . " your email has been sent";
}