Question

I have one form as shown below:

Page 1:

<form name = "form1" method="post" action = "page2.php">
........
</form>

Page2.php:

<?php

For loop ...
.....
end

?>

Now i want to have progress bar on page 1 so that it can show the completion progress of for loop in page2.php.

Tell me how can i do that? Please don’t direct me to any progress bar i’m already using the progress but i don’t know how to implement the code into it,

The following is the code i’m currently using

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.progressbar.min.js"></script> 

$(document).ready(function() { 
$("#spaceused1").progressBar(); 
}); 
HTML:

<span class="progressBar" id="spaceused1">25%</span> 

<a href="#" onclick="$('#spaceused1').progressBar(20);">20</a> 
<a href="#" onclick="$('#spaceused1').progressBar(40);">40</a> 
<a href="#" onclick="$('#spaceused1').progressBar(80);">80</a> 

It works fine when i click on the above links. But how can i show it on page1 to show the progress of for loop on page2.php?

Please help me out.

Answer 1

Page2.php:

<?php

for(;;) {
    //In each loop iteration, update your progress and store it in the session
    $_SESSION['myFormProgress'] = myProgressCalculation();
}

?>

And then use AJAX to poll the server, receive the current value of $_SESSION['myFormProgress'], and update your progress bar accordingly.

As Jonah Bron points out, you’ll also need to submit your form to Page2.php using AJAX. Otherwise, you won’t be able to continue running JavaScript on the page (to update the progress bar). When the for loop is finished (and the progress bar is full), I suspect you will want to redirect the user to a new page where the results can be seen.