<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- JQuery link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- JQuery code -->
<script>
$(document).ready(function() {
$("form").submit(function(event) {
// Disable the action and the method inside the form
event.preventDefault();
// Now get data from the inputs
var name = $("mail-name").val();
var email = $("mail-email").val();
var gender = $("mail-gender").val();
var message = $("mail-message").val();
var submit = $("mail-submit").val();
$(".form-message").load("mail.php", {
name: name,
email: email,
gender: gender,
message: message,
submit: submit
});
});
});
</script>
</head>
<body>
<form action="mail.php" method="POST">
<input id="mail-name" type="text" name="name" placeholder="Full name">
<br>
<input id="mail-email" type="text" name="email" placeholder="Email">
<br>
<select id="mail-gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br>
<textarea id="mail-message" name="message" placeholder="Message"></textarea>
<br>
<button id="mail-submit" type="submit" name="submit">Send e-mail</button>
<p class="form-message"></p>
</form>
</body>
</html>
<!-- this is the mail.php file that has the error handlers -->
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$gender = $_POST['gender'];
$message = $_POST['message'];
$errorEmpty = false;
$errorEmail = false;
if (empty($name) || empty($email) || empty($message)) {
echo "<span class='form-error'>Fill in all fields!</span>";
$errorEmpty = true;
}
else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Wtite a valid e-mail address!</span>";
$errorEmail = true;
}
else {
echo "<span class='form-success'>Everything is right!</span>";
}
}
else {
echo "There was an error!";
}
?>
<script>
$("#mail-name, #mail-email, #mail-gender, #mail-message").removeClass("input-error");
var errorEmpty = "<?php echo $errorEmpty; ?>";
var errorEmail = "<?php echo $errorEmail; ?>";
if (errorEmpty == true) {
$("#mail-name, #mail-email, #mail-message").addClass("input-error");
}
if (errorEmail == true) {
$("#mail-email").addClass("input-error");
}
// There are no errors
if(errorEmpty == false && errorEmail == false){
// remove the values inside the inputs
$("#mail-name, #mail-email, #mail-message").val("");
}
</script>
and I am getting this error when clicking the submit button!!!
M137:4 Uncaught SyntaxError: Invalid or unexpected token
- at p (jquery.min.js:2:523) at Ja (jquery.min.js:3:15825)
- at r.fn.init.append (jquery.min.js:3:17096)
- at r.fn.init. (jquery.min.js:3:18200)
- at T (jquery.min.js:3:398)
- at r.fn.init.html (jquery.min.js:3:17878)
- at Object. (jquery.min.js:4:19097)
- at i (jquery.min.js:2:28017)
- at Object.fireWith [as resolveWith] (jquery.min.js:2:28783)
- at A (jquery.min.js:4:14017)
