I have a site that I'm trying to use jQuery form validation, shadowbox, ajax form submitting, and sliding div tag. I've gotten everything to work except the ajax form submitting. Any help to get this working would be great. I am attaching the html of the site below:
- <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="java/shadowbox/shadowbox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="java/external.js"></script>
<script type="text/javascript" src="java/jquery.min.js" ></script>
<script type="text/javascript" src="java/feedback.js"></script>
<script type="text/javascript" src="java/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src="java/jquery.validate.js"></script>
<script type="text/javascript" src="java/cmxforms.js"></script>
<script type="text/javascript" src="java/jquery.metadata.js"></script>
<script type="text/javascript" src="java/jquery.form.js"></script>- <script type="text/javascript">
$(document).ready(function() {
$("#frm").validate();- var v = jQuery("#frm").validate({
submitHandler: function(frm) {
jQuery(frm).ajaxSubmit({
target: "#tab_result"- });
});
</script>- <script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'images/fback.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '101px', //height of tab image //Optionally can be set using css
imageWidth: '30px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top/ use if tabLocation is left or right
leftPos: '50px', //position from left/ use if tabLocation is bottom or top
fixedPosition: true //options: true makes it stick(fixed position) on scroll
});
});
</script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});- </script>
<!--[if lt IE 7]>
<script src="java/DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('img,div');
</script>- <![endif]-->
- </head>
- <body>
- <div class="slide-out-div">
<a class="handle" href="#">Content</a>
<form id="frm" name="frm" action="contact.asp" method="post" class="cmxform">
<span class="feedback_label">Company Name:<sup>*</sup></span>
<input type="text" name="CompanyName" runat="server" class="input {required:true, messages:{required:'Please enter your company name'}}" /><br /><br />
<span class="feedback_label">Contact Name:<sup>*</sup>:</span>
<input type="text" name="ContactName" runat="server" class="input {required:true, messages:{required:'Please enter your company name'}}" /><br /><br />- <span class="feedback_label">Phone Number<sup>*</sup>:</span>
<input type="text" name="Phone" runat="server" class="input {required:true, messages:{required:'Please enter your company name'}}" /><br /><br />- <span class="feedback_label">Email Address<sup>*</sup>:</span>
<input type="text" name="Email" runat="server" class="input {required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}" /><br /><br /><br />- <span class="feedback_label">Area of Interest:</span>
<select name="interest" runat="server" class="input">
<option value="website Development">Website Development</option>
<option value="Graphic Design">Graphic Design</option>
<option value="Other">Other</option>
</select><br /><br /><br />- <span class="feedback_label">Comments:</span>
<input type="textarea" rows="20" cols="5" name="Comments" class="text_area" /><br /><br />
<span class="feedback_label"><input type="submit" value="Submit" class="button_tab" /></span>
</form>
<div id="tab_result"></div>
</div>- </body>
</html>