I'm new to using jQuery with AJAX. I want to build a simple form that prompts the user when one of the field inputs are incorrect.
My only requirement (for now) is that the name must be "John".
html (ajaxtutorial.html)
<!DOCTYPE html>
<html>
<head>
<title>AJAX Form</title>
</head>
<body>
<form action="ajax/contact.php" method="post" class="ajax">
<div>
<input type="text" name="name" placeholder="Your name">
</div>
<div>
<input type="text" name="email" placeholder="Your email">
</div>
<div>
<textarea name="message" placeholder="Your message"></textarea>
</div>
<input type="submit" value="Send">
<div>
</form>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/main.js"></script>
</body>
</html>
jQuery (main.js):
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this), //references the inputs within the find function
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
dataType: 'json',
cache: false,
success: function(result) {
if(result.error == true) {
console.log('Did not type John');
}
else {
console.log('Typed John');
}
}
});
return false;
});
php (contact.php):
<?php
$errors = array();
$form_data = array();
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
if ($name != 'John') {
$errors['name'] = true;
}
if (array_key_exists('name',$errors)) {
$form_data['success'] = true;
$form_data['error'] = true;
} elseif (empty($errors)) {
$form_data['success'] = true;
}
echo json_encode($form_data);
?>
I feel it's simple, but can't solve it. I want to identify the error by it's class (i.e. result.['class']) in order to provide unique feedback for each error.
Thanks for the help
