Solved

jQuery - submit form before ajax call?

Posted on 2014-11-11
4
207 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

810 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