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

jQuery Dialog Form and Post Back

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
beigs
Asked:
beigs
1 Solution
 
hulutterCommented:
Hi,
try to submit the form with this function:
dialog.data.find('form').submit();
0
 
beigsAuthor Commented:
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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