• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 681
  • Last Modified:

Post Form to Lightbox

I have a store locator form on a site. When the form is submitted, I want to validate the zip code is 5 digits and display the results in a lightbox type of window. I've tried both thickbox and DOMWindow, but I couldn't get the form variables to them because I'm not a jQuery expert.
0
kernel-panic
Asked:
kernel-panic
  • 2
1 Solution
 
kernel-panicAuthor Commented:
Here's my code so far...
$(document).ready(function(){
	$("#search").click(function(){
		var hasError = false;
		var zipReg = /^([0-9]{5})?$/;
		var zipVal = $("#zip").val();
		var radiusVal = $("#radius").val();
		
		if(zipVal == '' || !zipReg.test(zipVal)) {
			alert("Please enter a 5-digit zip code.");
			hasError = true;
			return false;
		}
		
		if(radiusVal == '') {
			alert("Please select a search radius.");
			return false;
		}
		
		if(hasError == false) {
			var data = 'zip=' + zipVal() + '&radius=' + radiusVal();
			
			$.ajax({
				type: "GET",
				url: "find-a-dealer-detail.php",
				data: data,
				success: function(msg){
				alert( "Data Sent: " + msg );
				}
			});
		}
		
		return false;
	});
});


<form action="#" id="findDealerForm" title="findDealerForm" method="post">
	<fieldset>
		<label for="zip">Zip Code</label>
		<input type="text" id="zip" name="zip" class="zip" />
		<label for="radius" style="width: 50px;">Radius</label>
		<select id="radius" name="radius" class="radius" />
			<option value="">Select</option>
			<option value="25">25 Miles</option>
			<option value="50">50 Miles</option>
			<option value="75">75 Miles</option>
			<option value="100">100 Miles</option>
		</select>
		<input type="image" src="/images/search.png" alt="Search" class="search" id="search" />
	</fieldset>
</form>

Open in new window

0
 
kernel-panicAuthor Commented:
Eventually figured it out myself.
$(document).ready(function(){
	$("#findDealerForm").submit(function(){
		var hasError = false;
		var zipReg = /^([0-9]{5})?$/;
		var zip = $("#zip");
		var radius = $("#radius");
		
		if(zip.val() == '' || !zipReg.test(zip.val())) {
			alert("Please enter a 5-digit zip code.");
			hasError = true;
			return false;
		}
		
		if(hasError == false) {
			var data = 'zip=' + zip.val() + '&radius=' + radius.val();
			
			$.ajax({
				type: "GET",
				url: "find-a-dealer-detail.php",
				data: data,
				success: function(results){
					$("#hiddenResults").html(results);
					$.openDOMWindow({ borderColor:'#999', borderSize:'2', overlay:1, overlayColor:'#000', overlayOpacity:'76', height:340, width:559, loader:1, loaderImagePath:'images/ajax-loader.gif', loaderHeight:32, loaderWidth:32, windowSource:'inline', windowSourceID:'#hiddenResults' });
				}
			});
		}
		
		return false;
	});
});

<form action="#" id="findDealerForm" title="findDealerForm" method="post">
	<fieldset>
		<label for="zip">Zip Code</label>
		<input type="text" id="zip" name="zip" class="zip" />
		<label for="radius" style="width: 50px;">Radius</label>
		<select id="radius" name="radius" class="radius" />
			<option value="">Select</option>
			<option value="25">25 Miles</option>
			<option value="50">50 Miles</option>
			<option value="75">75 Miles</option>
			<option value="100">100 Miles</option>
		</select>
		<input type="image" src="<?php echo $thisServer; ?>/images/search.png" alt="Search" class="search" id="search" />
	</fieldset>
</form>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now