jQuery - submit form before ajax call?

Posted on 2014-11-11
Last Modified: 2014-11-11
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">

    var sendTracking= function() {
		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; ?>;
        		 url: updateURL, success: function(data){
				alert("Updated Order Details Sent to Customers with Tracking Number");

<?php //process_order_update.php 

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


Open in new window

Question by:sabecs
  • 2
  • 2

Accepted Solution

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" />

		//SendTracking click event handler
			//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");

Open in new window

Hope this helps.

Author Comment

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(){

Assisted Solution

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.

Author Closing Comment

ID: 40436694
Thanks vr6r, that is perfect...

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)

867 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now