Solved

jQuery - submit form before ajax call?

Posted on 2014-11-11
4
203 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks vr6r, that is perfect...
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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 …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)

762 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

6 Experts available now in Live!

Get 1:1 Help Now