CODEWITHSUNDEEP
phpforms
Gary
Gary

Reputation: 99

Display PHP output immediately after HTML form submission

I have a HTML form which does a POST submit to a FedEx PHP script that takes 20-25 seconds to complete execution.

My Intention : Upon hitting submit button, the screen immediately refreshes to the new PHP generated page, showing a message "Form data submitted. Proceesing may take up to 30 seconds". Followed by a few status update message. And eventually a "Success" message upon completion of the FedEx PHP script. All sequentially outputted as the script execution progress.

My Problem : Upon hitting submit button, the screen remains at the form page, and the screen does not refresh until the end of the FedEx PHP script execution. So that leaves a long period of silence and user not knowing the submission status.

What I have tried so far : ob_flush() flush() . I thought initially it was an output buffering problem . But when I execute FedEx PHP script by doing a repost (right click->refresh). the status message is flushed sequentially using ob_flush() flush() . It's only when I do a submission form a HTML form , that nothing gets outputted until the end of the PHP script where everything gets flushed at once.

Please help! Thank you in advance.

Gary Cho

Upvotes: 1

Views: 1522

Answers (3)

Jens A. Koch
Jens A. Koch

Reputation: 41756

JS

$('#loading-indicator').show();  // show the loading message

$.ajax({  
      type: "POST",  
      url: "fedex.php",  
      data: dataString,  
      success: function(html) {

       console.log(html); //to see what's returned

       //use the data to generate content you want  
       alert ("Done!")

       $(".content-from-fedex").html(html); // insert the response into div

       $('#loading-indicator').hide(); // hide the loading message

      }
});

HTML

<div class="content-from-fedex" id="data"></div>

<div id="loading-indicator">
    <img src="http://dummyimage.com/200x200/000/fff.gif&text=LOADING" 
         class="ajax-spinner"/>
</div>

Upvotes: 1

Youness
Youness

Reputation: 1495

this is an example of a function :

function SUMBIT(){
alert('operation started it might take 30 seconds');
$.post('urltothepage.php'{
//here you send the POST Variables
name : $('#txtname').val(),
lastname : $('#txtlastname').val()
.
.
.
.
//just an exmaple and do this for every field you are sending its value to page
,
function(data){
//data contains the response from the page 
alert("success");
});
}

Upvotes: 0

Devatoria
Devatoria

Reputation: 685

As said Marc Anton Dahmen, you should display a basic page confirming submition. On this page, make an AJAX request to the FedEx script. When the script gives you its result, display it on the page using javascript.

Upvotes: 1

Related Questions