jQuery - submit form before ajax call?

Hi,
I need my sendTracking function to submit a form #update_order before executing my process_order_update.php
All works fine except I don't receive an alert back "Updated Order Details Sent to Customers with Tracking Number"?

If I comment out  $('form#update_order').submit(); then I receive the alert?

Any ideas on how it should be coded would be appreciated.

// view_order_update.php 
<input type="button" class="button_sml orange" onclick="sendTracking();" value="Send Tracking Details">

<script>
    var sendTracking= function() {
        
		$('form#update_order').submit();
		
		var answer = confirm('This will send an email to the customer with their Delivery Tracking Number.');
        if(answer==true) {
			 
			 var updateURL = "/process_order_update.php?order_id="+<?php echo $order_id; ?>;
			 $.ajax({
        		 url: updateURL, success: function(data){
				alert("Updated Order Details Sent to Customers with Tracking Number");
				}
			 });
			 
        }
    }
</script>


<?php //process_order_update.php 
...
..


echo "Updated Order Details Sent to Customers with Tracking Number";

?>

Open in new window

sabecsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

vr6rCommented:
You will need to process your first form submit as an ajax request as opposed to a standard submit action like you are currently doing.  Then you can process the rest of your code in the callback function of the async request (see below).

The reason your alert works when you comment out .submit() is because the submit method redirects your browser to the form's action target as soon as it loads, which will effectively skip the rest of your code that comes after that point.

Try this... I also made a few updates to reflect some general practices.
Those changes are as follows:
1. Replaced button 'onclick' with a click event handler
2. Replaced $('form#update_order').submit() with async form post
3. Placed remaining code inside callback function of first form's async request

<input id="SendTracking" type="button" class="button_sml orange" value="Send Tracking Details" />

<script>
	$(function(){
		
		//SendTracking click event handler
		$('#SendTracking').click(function(){
		
			//submit update_order as async request.  
			//You will probably want to replace the first parameter here with the "Action" value defined in your update_order form.
			//I just used the action attribute so you could essentially copy and paste this for testing.
			$.post($('form#update_order').attr('action'), $('#form#update_order').serialize(), function(){
			
				//once that initial post completes, proceed with the confirmation and processing of process_order_update.
				if(confirm('This will send an email to the customer with their Delivery Tracking Number.') == true)
				{
					//user confirmed, proceed.
					$.post("/process_order_update.php?order_id="+<?php echo $order_id; ?>, function(data){
						alert("Updated Order Details Sent to Customers with Tracking Number");
					});
				}		
				
			});
		});
		
	});
</script>

Open in new window


Hope this helps.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sabecsAuthor Commented:
Thanks for your help, much appreciated.
It still looks like it's not submitting the form?

<form action="view_upd_order.php" method="POST" name="update_order" id="update_order">

should this line now be?
$.post($('form#update_order').attr('view_upd_order.php'), $('#form#update_order').serialize(), function(){
0
vr6rCommented:
Ah ok, in that case the first $.post line should look like this:
(also, looks like I had a typo... I had an extra "#" before form#update order so I fixed that too in the following line)

$.post("view_upd_order.php", $('form#update_order').serialize(), function(){

Open in new window


Let me know how it goes.
0
sabecsAuthor Commented:
Thanks vr6r, that is perfect...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.