Display PHP output immediately after HTML form submission

Question

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

submit the form via an AJAX post and let JS create the status messages independently from the actual response as direct feedback — Marc Anton Dahmen, Aug 14 '14 at 09:12
You need to run the request asynchronously. Either from the client via AJAX, or in the background from PHP via a Gearman worker or something like it. — deceze, Aug 14 '14 at 09:16
Even when using `ob_flush();flush();` the ajax call will wait for the whole response. — Kate Miháliková, Aug 14 '14 at 09:17
KateMihalikova - yes, that's precisely my problem. On HTML form submit, nothing gets flushed to a new screen until the end of the PHP script execution. ob_flush();flush(); doesn't seem to do anything in this situation (despite working correctly on repost). — Gary, Aug 14 '14 at 09:25

score 1 · Answer 1 · answered Aug 14 '14 at 09:16

1

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.

answered Aug 14 '14 at 09:16

Devatoria

645
1
5
12

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You might use AJAX to post to the FedEx PHP script.
Combine that with an AJAX spinner/loading indicator to show some fake progress.
If the fedexp script provides sequential updates, you could stream the response part by part.
- jquery ajax, read the stream incrementally?
Take a look at "readyState 3" - https://stackoverflow.com/a/2754028/1163786

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>

•Take a look at "readyState 3" - Thank you - Looks promising! — Gary, Aug 14 '14 at 09:41

score 0 · Answer 3 · answered Aug 14 '14 at 09:18

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");
});
}

Display PHP output immediately after HTML form submission

3 Answers3