Untitled

1. Form gets filled in
 2. On click of the submit butten, javascript checks the fields.
 3. If okay, javascript submits the form
 4. if mail has been sent, the page is reloaded to  contact.php?MailStatus=Success
 5. if not (it will run a javascript giving en errormessage telling the user to retry without the fields being cleared.

<!DOCTYPE html>

<html>
<head>
    <title>Mijn Dier En Ik</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="www.csl-tech.be" />
    <meta name="description" content="Op zoek naar dierenhotels, artsen, winkels,... Dan is Mijn Huisdier en Ik de website die je zoekt. Neem een kijkje!" />
    <link rel="stylesheet" type="text/css" href="CSLCSS.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="functions.js"></script>
</head>

<body>

<div class="container csl-main">
        <div class="row">
<div class="col-md-6">
                <form id="MailForm" method="post">
                    <div id="Message"></div>

                    <div id="FormFields">
                    <div class="form-group">
                        <label for="fname">Voornaam</label>
                        <input class="form-control" type="text" id="fname" placeholder="Uw voornaam...">
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="lname">Achternaam</label>
                        <input class="form-control" type="text" id="lname" placeholder="Uw achternaam...">
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="email">E-mail</label>
                        <input class="form-control" type="text" id="email" placeholder="Uw e-mail...">
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="country">Land</label>
                        <select class="form-control" id="country" name="country">
                            <option value="Belgie">België</option>
                            <option value="Nederland">Nederland</option>
                        </select>
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="subject">Onderwerp</label>
                        <select class="form-control" id="subject" name="subject">
                            <option value="Vragen">Vragen over Mijn Dier en Ik</option>
                            <option value="Suggesties">Suggesties voor de website</option>
                            <option value="Reservatie of Contact">Vragen over het reservatie- en/of contactsysteem</option>
                            <option value="Foto inzending">Foto inzenden</option>
                            <option value="Aanpassing gegevens">Aanpassing gegevens</option>
                            <option value="Andere">Andere</option>
                        </select>
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="message">Uw bericht</label>
                        <textarea class="form-control" id="message" placeholder="Typ hier uw bericht..." style="height:200px"></textarea>
                    </div>
                    <br />

                    <input id="submit" class="btn btn-default" value="Versturen" onclick="CheckMailEntry()">
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>

<?php
    if ($_GET['MailStatus'] == 'Success') {
        echo '<script type="text/javascript">MailSuccess()</script>';
    }


    if(isset($_POST['submit'])) {
        header('Location: contact.php?MailStatus=Success');
        echo 'ok';
    }
?>


</html>

function CheckMailEntry() {

    document.getElementById("Message").innerHTML = "";
    if (document.getElementById("fname").value == "") {
        document.getElementById("Message").innerHTML = "<div class='alert alert-danger'><strong>Fout:</strong> Voer uw voornaam in.</div>";
    } else if (document.getElementById("lname").value == "") {
        document.getElementById("Message").innerHTML = "<div class='alert alert-danger'><strong>Fout:</strong> Voer uw achternaam in.</div>";
    } else if (document.getElementById("email").value == "") {
        document.getElementById("Message").innerHTML = "<div class='alert alert-danger'><strong>Fout:</strong> Voer uw email in.</div>";
    } else if (document.getElementById("message").value == "") {
        document.getElementById("Message").innerHTML = "<div class='alert alert-danger'><strong>Fout:</strong> Gelieve een bericht te typen.</div>";
    } else {
        document.getElementById("Message").innerHTML = "";
        document.getElementById("submit").submit();
    };

};


function MailSuccess() {
    document.getElementById("Message").innerHTML = "<div class='alert alert-success'><strong>Succes:</strong> Wij hebben uw mail ontvangen en zullen deze zo snel mogelijk beantwoorden.</div>";
    document.getElementById("FormFields").innerHTML = "";
};