html form
<div id="contactform">
<form id="contact" action="#">
<fieldset>
<label for="name" id="name_label">Name <br /></label>
<input type="text" name="name" id="name" value="" class="text-input" />
<label for="email" id="email_label">E-mail<br /></label>
<input type="text" name="email" id="email" value="" class="text-input" />
<label for="msg" id="msg_label">Message</label>
<textarea cols="60" rows="10" name="msg" id="msg" ></textarea> <br class="clear" />
<input type="submit" name="submit" class="button" id="submit_btn" value="Submit"/>
</fieldset>
</form>
<br class="clear" />
<span class="error" id="name_error">Please enter name !</span>
<span class="error" id="email_error">Please enter email address !</span>
<span class="error" id="email_error2">Please enter valid email address !</span>
<span class="error" id="msg_error">Please enter message !</span>
</div>
jQuery(function() {
jQuery('.error').hide();
jQuery(".button").click(function() {
// validate and process form
// first hide any error messages
jQuery('.error').hide();
var name = jQuery("input#name").val();
if (name == "") {
jQuery("span#name_error").show();
jQuery("input#name").focus();
return false;
}
var email = jQuery("input#email").val();
if (email == "") {
jQuery("span#email_error").show();
jQuery("input#email").focus();
return false;
}
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email)) {
jQuery("span#email_error2").show();
jQuery("input#email").focus();
return false;
}
var msg = jQuery("textarea#msg").val();
if (msg == "") {
jQuery("span#msg_error").show();
jQuery("textarea#msg").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
//alert (dataString);return false;
jQuery.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
jQuery('#contactform').html("
");
jQuery('#message').html("Contact Form Submitted!")
.append("We will be in touch soon.
")
.hide()
.fadeIn(1500, function() {
jQuery('#message');
});
}
});
return false;
});
});