Topic: I'm about ready to commit suicide - please prevent!
Here is my test page. http://tinyurl.com/yg9nw9a Press submit and you can see how it performs.
I have tried about a million things. I am simply trying to combine jquery validation plugin with ajax form submit. I have resigned myself to being happy with a simple javascript popup thank you message via an ajax submit. This is done in order to prevent the user from leaving the page on form submit.
I "think" I need to use a submitHandler in the validation JS and call the ajax submit. But I am unable to piece it together. This is the very last piece of the puzzle for me and this site. Once I get this backend stuff working it's all formatting (easy stuff).
The JS validation works perfect. When JS is off I'll just use my good old PHP script I have. Here is the page in it's entirety. Please help put me out of my misery. I'm definitely working above my pay-grade here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>edit-your-website.com</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
overflow:hidden;
background:none;
}
#contactform {
float:left;
position:relative;
width:319px;
padding:0;
font-size:13px;
}
#contactform:hover, #contactform:focus {
background-position:0 -322px;
}
#contactform input {
margin:4px 0 15px;
border:0;
padding:13px;
height:17px; /* actual height = 43px */
width:293px; /* actual width = 244px */
background:url(img/input3.jpg) 100% 0 no-repeat;
}
* html #contactform input {
background-attachment:fixed;
}
#contactform input:hover, #contactform input:focus {
background-position:100% -43px;
outline:0;
}
#contactform textarea {
height:129px; /* actual height = 155px */
width:293px; /* actula width = 319px */
border:0;
background:none;
background:url(img/textarea.jpg) 0 0 no-repeat;
overflow:auto;
outline:0;
padding:13px;
resize:none;
}
#contactform textarea:hover, #contactform textarea:focus {
background-position:0 -155px;
}
#contactform input#captcha {
width:108px;
margin:13px 0 0; /* if JS is off this kicks in */
float:left;
background:url(img/captcha.jpg) 0 0 no-repeat;
}
#contactform input#captcha:hover {
background-position:0 -43px;
}
#contactform input#contact-login {
float:right;
width:134px;
height:43px;
cursor:pointer;
margin:13px 0 0;
background:url(img/captcha.jpg) no-repeat;
}
* html #contactform input#contact-login {
margin-left:-6px;
}
#contactform #contact-login:hover, #contactform #contact-login:focus {
background-position:0 -43px;
}
#contactform input.error {background-position:100% -86px;}
#contactform textarea.error {background-position:0 -310px;}
#contactform input#captcha.error {background-position:0 -86px;}
.required {color:red; font-weight:bold;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script type="text/javascript">
$.validator.methods.equal = function(value, element, param) {
return value == param;
};
$(document).ready(function(){
$("#contactform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
comments: {
required: true,
minlength: 5
},
captcha: {
equal: 4
}
},
messages: {
email: "",
name: "",
comments: "",
captcha: ""
}
});
});
</script>
<script type="text/javascript">
function clearText(a){if(a.defaultValue==a.value){a.value=""}else{if(a.value==""){a.value=a.defaultValue}}};
</script>
</head>
<body>
<form id="contactform" method="post" action="http://www.edit-your-website.com/formmail.php">
<div>
<input type="text" id="name" name="name">
<input type="text" id="email" name="email">
<textarea id="comments" name="comments" rows="3" cols="35"></textarea>
<input type="text" id="captcha" name="captcha" value="2 + 2 = ?" onFocus="clearText(this)" onBlur="clearText(this)">
<input type="submit" id="contact-login" value="">
</div>
</form>
</body>
</html>
Last edited by Eric (November 1, 2009 11:31 am)
