Solved

jQuery Dialog Form and Post Back

Posted on 2010-08-13
2
845 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

734 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