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 *" /> <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:
$ ("#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" }, function(data){ $ (".form-message").html( data ); } ); });
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); } } else { echo "Not working!"; } ?>
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.