AJAX PHP邮件表格

I am trying to make an PHP mail form. I have it working like this:

<form method="post" action="PHP/index.php" autocomplete="off">
    <fieldset class="singleLine">
        <input id="name" type="text" name="name" required>
        <label for="name">Full Name</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="singleLine">
        <input id="email" type="text" name="email" required>
        <label for="email">Email</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="multiLine">
        <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea>
        <label for="message" id="messageTop">Message</label>
        <div class="after"></div>
    </fieldset>
    <fieldset>
        <input id="submit" name="submit" type="submit" value="Submit">
        </fielset>
</form>

This is my PHP file

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: '; 
    $to = ''; 
    $subject = 'Contact Form';

    $body = "From: $name
 E-Mail: $email
 Message:
 $message";


    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $from)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    }
?>

What I dont like about this method is that it send you to a new page with the text message has been send OR something went wrong. I would really like to make that with a popup/modal. The modal is not the problem.

The Ajax call is giving me some problems. I need to probably change my PHP code but not sure how. Could someone help me out. I am not skilled with PHP.

This is my JS code for the ajax call and the modified form

function sendMail() {
    $("#submit").click(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var text = $("#message").val();
        var dataString = 'name='+ name + '&email=' + email + '&text=' + text;


    $.ajax({
        url: 'PHP/index.php',
        type: 'post',
        data: dataString
    })
        .promise()
        .done(function (data) {
            alert("done");
        });
    });
}

And the form:

<form autocomplete="off">
    <fieldset class="singleLine">
        <input id="name" type="text" name="name" required>
        <label for="name">Full Name</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="singleLine">
        <input id="email" type="text" name="email" required>
        <label for="email">Email</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="multiLine">
        <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea>
        <label for="message" id="messageTop">Message</label>
        <div class="after"></div>
    </fieldset>
    <fieldset>
        <div id="submit" name="submit">Submit</div>
        <!--<input id="submit" name="submit" type="submit" value="Submit">-->
        </fielset>
</form>

Give your form a class or id.

function sendMail() {
    //bind on the submit of the form
    $(".myForm").on('submit', function(e) {
        e.preventDefault(); //cancel the normal form submission

        $.ajax({
            url: 'PHP/index.php',
            method: 'post',
            data: $(this).serialize(), //serialize all the inputs of the form for the ajax request
        }).then(
            function success() {
                console.log(arguments);
                //do stuff
            },
            function error() {
                console.log(arguments);
                //do stuff
            }
        )
    });
}