My mailform is not working, please help.
The HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="scripts/mailform/style.css" type="text/css" media="screen" >
<script src="scripts/mailform/form.js" type="text/javascript"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="52" align="center"><table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" align="left" valign="bottom"><span class="style67">PLEASE WRITE TO US </span></td>
</tr>
</table></td>
</tr>
<tr>
<td><div id="contact_form">
<form method="POST" id="ajax_form" action="email.php">
<label>
<input class="text_input clear" type="text" name="name" id="name" value="Name" />
</label>
<label>
<input class="text_input clear" type="text" name="email" id="email" value="Email" />
</label>
<label for="select-choice"></label>
<select name="select" size="1" class="select" id="select" value="test">
<option value="Genaral">General</option>
<option value="Service/Support">Service/Support</option>
<option value="Sale">Sales</option>
</select>
<label>
<textarea name="message" cols="10" rows="4" class="text_area clear" id="message">Message</textarea>
</label>
<label><button class="submit" type="submit">
<label>Send</label></label>
</form>
</div>
</td>
</tr>
</table>
</body>
</html>
email.php
[php]
[/php]
form.js
$(document).ready(function(){
$('form#ajax_form .submit').click(function(){
$('#ajax_form .error').hide(); //if error visibile, hide on new click
var name = $('input#name').val();
if (name == "" || name == " " || name == "Name") {
$('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
return false;
}
var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var email = $('input#email').val();
if (email == "" || email == " ") {
$('input#email').focus().before('<div class="error">Psst. You missed one.</div>');
return false;
} else if (!email_test.test(email)) {
$('input#email').select().before('<div class="error">I think your email is wrong...</div>');
return false;
}
var message = $('#message').val();
if (message == "" || message == " " || message == "Message") {
$('#message').focus().fadeIn('slow').before('<div class="error">Oops! You forgot to type a message!</div>');
return false;
}
var data_string = $('form#ajax_form').serialize();
$.ajax({
type: "POST",
url: "scripts/mailform/email.php",
data: data_string,
success: function() {
$('form#ajax_form').slideUp('fast').before('<div id="success"></div>');
$('#success').html('<h3>Success</h3><p>Your email has been sent.</p>').slideDown(1000);
}//end success function
}) //end ajax call
return false;
}) //end click function
var current_data = new Array();
$('.clear').each(function(i){
$(this).removeClass('clear').addClass('clear'+i);
current_data.push($(this).val());
$(this).focus(function(){
if($(this).val() == current_data[i]) {
$(this).val('');
}
});
$(this).blur(function(){
var stored_data = current_data[i];
if($(this).val()==''){
$(this).val(stored_data);
}
})
});
})style.css
/*========================================*/
/*========BODY STYLING FOR DEMO===========*/
/*========================================*/
#contact_form {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 4px auto;
width: 330px;
padding: 2px
}
.text_input {
background: #e7e7e7;
height: 17px;
width: 300px;
padding: 6px;
margin: 0 0 20px 0;
border: 1px solid #555;
-moz-border-radius: 10px;
-webkit-border-radius: 6px;
font-size: 12px
}
.text_area {
background: #e7e7e7;
width: 293px;
padding: 10px;
margin: 0 0 20px 0;
border: 1px solid #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-family: Verdana,Geneva,sans-serif;
font-size: 13px
}
.select{
background: #e7e7e7;
width:312px;
padding:7px;
margin: 0 0 20px 0;
border: 1px solid #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
}
.submit {
float: left;
height: 30px;
width: 70px;
background: #fff;
padding: 0 0 3px 0;
margin: 0 0 0 0;
border: 1px solid #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-size: 12px;
color: #333;
}
.submit:hover {
cursor: pointer
}
.error {
width: 318px;
padding:2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:5px auto;
text-align:center;
font-size: 14px;
color: #066350;
line-height: 22px
}
#success{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #555;
background:#e7e7e7;
padding:5px;
}
#success h3{font-size:24px;font-family:Garamond,Hoefler Text,Palatino,Palatino Linotype,serif;text-align:center;}
#success p{text-align:center;font-size:18px;line-height:22px;font-family:Helvetica Neue,Arial,Helvetica, sans-serif;}