jQuery - $.post Form Validation ?
Hi all
I’m not sure if this is a JQuery, HTML or PHP problem.
I have a simple Form here that passes the name, email etc to a php script with JQuery.
http://www.ttmt.org.uk/forum/jForm/
The Form works as expected - if all the fields are filled in you get a Thank You and the email is sent, if all the fields are not filled in you get a message asking you to.
The problem is when the send button is pressed and the information is sent the text fields still contain the text - I think the text fields should empty once the send button is pressed.
I’m I doing something wrong or do I need to clear the text fields myself when
the send button is pressed.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jQuery1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#contactForm').submit(function(){
var unameVal = $("#name").val();
var emailVal = $("#email").val();
var messageVal = $("#message").val();
$.post("contact.php", { username: unameVal, email: emailVal, message: messageVal }, function(data){
$("#status p").html(data);
});
return false;
});
});
</script>
<title>Form Test</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
html, body{
height:100%;
font:100% "Helvetica Neue", Helvetica, Arial, sans-serif;
}
form{
margin:30px;
width:23em;
}
#status p{
margin:30px;
font-weight:bold;
}
form fieldset{
border:0;
}
form label,
form input,
form select{
float:left;
}
form label{
width:100%;
}
form input,
form textarea{
background:#eee;
width:100%;
border-width:0;
padding:.35em .2em;
margin-bottom:8px;
font-size:1em;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
font:1em "Helvetica Neue", Helvetica, Arial, sans-serif;;
}
form input:focus,
form textarea:focus,
form input:hover,
form textarea:hover{
background:#e1dfdf;
}
form #send{
width:80px;
}
</style>
</head>
<body>
<form method="post" id="contactForm" action="">
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" />
<label for="email">Email:</label>
<input type="text" id="email" />
<label for="subject">Subject:</label>
<input type="text" id="subject">
<label for="text">Message:</label>
<textarea id="message" rows="10" col="30"></textarea>
<p><input type="submit" value="SEND" id="send" /></p>
</fieldset>
</form>
<div id="status">
<p></p>
</div>
</body>
</html>
PHP
<?php
$errors = array();
$required_fields = array('username','email','message');
foreach($required_fields as $fieldname){
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname])){
$errors[] = $fieldname;
}
}
if(empty($errors)){
$to = "info@ttmt.org.uk";
$username = $_POST['username'];
$name = explode(' ', $username);
$firstname = ucfirst($name[0]);
$email_field = $_POST['email'];
$subject = "Email from Website";
$message = $_POST['message'];
//
$body = "From: $name_field\
E-Mail: $email_field\
Message:\
$message";
//
mail($to, $subject, $body);
print "Thank you $firstname";
}else{
print "Please complete all fields.";
}
?>