Stack Exchange
Difficulties with displaying success message after form is sent
I'm still learning the code languages that I used to create my form with. So I can't seem to figure out what seems to be the problem. Here's my code:
HTML:
<form action="mail.php" method="POST">
    <ul class="form-style-1">
        <li>
            <input type="text" id="mail-name" name="name" class="field-divided" maxlength="15"  placeholder="Voornaam *" />&nbsp;<input type="text" id="mail-lastname" name="lastname" class="field-divided" maxlength="15" placeholder="Achternaam" >
        </li>
        <li>
            <input type="email" id="mail-email" name="email" placeholder="E-mail *" class="field-long" maxlength="40" >
        </li>
        <li>
            <input type ="text" id="mail-phone" name="phone" placeholder="Telefoonnummer" class="field-long" maxlength = "15">
        </li>
        <li>
            <select name="subject" id="mail-subject" class="field-select" >
                <option disabled value="" selected hidden >--Onderwerp-- *</option>
                <option value="Kennismakingsgesprek">Kennismakingsgesprek</option>
                <option value="Meer informatie">Meer informatie</option>
                <option value="activiteit">Aanmelding activiteit</option>
                <option value="Vraag/klacht">Vraag/klacht</option>
                <option value="Contact">Overig</option>
            </select>
        </li>
        <li>
            <textarea name="information" id="mail-information"  placeholder =" Je bericht *"class="field-long field-textarea" maxlength="2000"></textarea>
        </li>
        <button class="mail-submit" id="mail-submit" type="submit" name="submit">Send e-mail</button>
        <span class="form-message"></span>
    </ul>
</form>

JS:
$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        var name = $("#mail-name").val();
        var name = $("#mail-lastname").val();
        var email = $("#mail-email").val();
        var phone = $("#mail-phone").val();
        var subject = $("#mail-subject").val();
        var information = $("#mail-information").val();
        $(".form-message").load("mail.php", {
            name: name,
            lastname: lastname,
            email: email,
            phone: phone,
            subject: subject,
            information: information
        });
    });
});

**PHP: **
<?php

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

    $email_to = "#";
    $email_subject = "#";
    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $subject = $_POST['subject'];
    $information = $_POST['information'];

    $errorEmpty = false;
    $errorEmail = false;

    if (empty($name) || empty($lastname) || empty($email) || empty($phone) || empty($subject) || empty($information)) {
        echo "<span class='form-error'>Voer alle velden in!</span>";
        $errorEmpty = true;
    }
    elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "<span class='form-error'>Geef een geldig E-mail!</span>";
        $errorEmail = true; 
    }
    else {
        $formcontent=" Naam: $name \n\n Achternaam: $lastname \n\n Email: $email \n\n Telefoon: $phone \n\n Onderwerp: $subject \n\n Informatie: $information";
        $mailheader = "From: ".$_POST["email"]."\r\n"; 
        $headers = "From: ". htmlspecialchars($_POST['name']) ." <" . $_POST['email'] . ">\r\n";
        $headers .= "Reply-To: " . $_POST['email'] . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
        mail($email_to, $subject, $formcontent, $mailheader);
        echo "<span class='form-success'>E-mail has been sent!</span>";
    }
}
else {
    echo "Not working!";
}
?>

I know for a fact that this line of code is stopping the form from basically doing anything: 
$('form').submit(function (event) {
        event.preventDefault();

Without this line of code, the form works. But instead of getting a display message under the form, it just sends you to an echo page with the text in it.
What I'm looking for is that the page doesn't refresh after the form has been sent, so that it can display the form-succes  or error message.
Thank you for your time.

.load() is not really suited for this, so perhaps you should use .post().

You are looking for if (isset($_POST['submit'])) {... but you are not passing that variable in with the ajax call. Add submit: "1" to your .post args... using .post as @JayBlanchard said, using .load isn't as suited (it sends those vars as _GET).

Mhm, still no luck. I appreciate the help though.

You also have a slight goof with the lastname assignment in js: var name = $("#mail-lastname").val();... should be var lastname....

Didn't even notice that, thank you.

You should use ajax here like this for example on submit of your form just 
$("#mail-submit").click(function(event){
    event.preventDefault();
    var name = $("#mail-name").val();
    var lastname = $("#mail-lastname").val();
    var email = $("#mail-email").val();
    var phone = $("#mail-phone").val();
    var subject = $("#mail-subject").val();
    var information = $("#mail-information").val();
    $.post("mail.php",
        {
          name: name,
          lastname: lastname,
          email: email,
          phone: phone,
          subject: subject,
          information: information,
          submit: "yes"  // this is for your php if isset($_POST['submit'])
        },
        function(data){
            $(".form-message").html( data ); // put return in html element
        }
    );
});

let me know if you need some more details

...there should probably also be a event.preventDefault(): in there.
