Solved

jQuery - submit form before ajax call?

Posted on 2014-11-11
4
208 Views
Last Modified: 2014-11-11
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

0
Comment
Question by:sabecs
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
vr6r earned 500 total points
ID: 40436474
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
 

Author Comment

by:sabecs
ID: 40436503
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
 
LVL 8

Assisted Solution

by:vr6r
vr6r earned 500 total points
ID: 40436576
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
 

Author Closing Comment

by:sabecs
ID: 40436694
Thanks vr6r, that is perfect...
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
This article discusses how to create an extensible mechanism for linked drop downs.
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)

839 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