Solved

jQuery Dialog Form and Post Back

Posted on 2010-08-13
2
843 Views
Last Modified: 2013-11-11
I don't know if my brain is fried or what, but I'm trying to do a simple form in a jQuery dialog box that posts the data to a page outside of the dialog.  I can post the information to a page within the dialog just fine, but I want it to post the data to another page and close the dialog.
Form (Displayed in Dialog)
<form method="POST" name="order-search-form" id="order-search-form" action="../orderSearch2.php">
	<fieldset>
		<legend></legend>
		<p>To search for an order, please provide one of the following...</p>
		<label for="order_id">Order ID: </label><input type="text" name="order_id" id="order_id" class="ui-state ui-state-default ui-corner ui-corner-all" />
		<div id="oclear"></div>
		<label for="username">Username: </label><input type="text" name="username" id="username" class="ui-state ui-state-default ui-corner ui-corner-all" />
		<div id="oclear"></div>
		<label for="customer_number">Customer Number: </label><input type="text" name="customer_number" id="customer_number" class="ui-state ui-state-default ui-corner ui-corner-all" />
		<div id="oclear"></div>
	</fieldset>
	<div id="oclear"></div>
	<div id="searchError" class="ui-state-error ui-corner ui-corner-all" style="margin: 10px 0; padding: 2px 7px; display: none;"></div>
</form>

Open in new window

jQuery Code:
$(document).ready(function() {
	/**
	 * Search For Orders
	 */
	jQuery("#orderSearch").click(function(){
		
		$("#order-search").load('func/orderSearch.php').dialog({
			bgiframe: true,
			autoOpen: true,
			position: 'center',
			title: 'Order Search',
			width: 400,
			height: 400,
			modal: true,
			buttons: {
				'Search': function() {
					var bValid = true;
	
					var order_id = $('#order_id'),
						username = $('#username'),
						customer_number = $('#customer_number');
					
					if (customer_number.val() == "" && username.val() == "" && order_id.val() == ""){
						$('#searchError').fadeIn("slow");
						$('#searchError').html("<p>You must provide an order id, username/email or a customer number to continue.</p>");
						bValid = false;
					}
					
					if (bValid) {
						//arggggg...this is where I can't seem to get it right...
					}
				},
				'Close Window': function() {
					$(this).dialog("destroy");
					
				},
				'Start Over': function() {
					$('#searchError').fadeOut("slow"),
					$('#searchError').html("");
					$("#order-search-form").resetForm();
				}
			},
			close: function() {
				$(this).dialog("destroy");
			}
		});
	});
}); 

Open in new window

Essentially, if bValid is true, I want to post the data to a another page and close the dialog.  The traditional $.post just pulls the orderSearch2.php page within the dialog.

I know this is simple...I just can't see it right now.
0
Comment
Question by:beigs
2 Comments
 
LVL 1

Accepted Solution

by:
hulutter earned 250 total points
ID: 33431487
Hi,
try to submit the form with this function:
dialog.data.find('form').submit();
0
 

Author Closing Comment

by:beigs
ID: 33431547
That's what I was looking for...can't believe that a couple of hours of google searches didn't turn that up...

if (bValid){ $("#order-search-form").submit(); }

That did the trick...thanks.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question