How to load progress bar “on click” using php

Question

I want to show progress while the php script runs so the user doesn't click the send button twice in welcome.php but this displays processing not on click but after the action is completed while my intention is to do it onclick while the action gets executed.

<html>

<head>
    <script>
    function myFunction() {
        document.getElementById("display").innerHTML = "Processing . . .";
    }
    </script>
</head>

<body>
    <form action="ratings.php" method="post">
        Insert URL :
        <input type="text" name="id">
        <br> Number Of Reviews:
        <input type="number" name="number">
        <br>
        <input type="submit" onclick="myFunction()">
    </form>
    <p id="display"></p>
</body>

</html>

Answer 1

To achieve this, what you can do is on click, show the progress bar and submit your form via AJAX.

After PHP processing of the form is complete, you may move the page to another page using window.location

I guess this is the best practice given the situation.

Answer 2

Jquery version. Instead of submit button use a span or div with id. and while click span trigger the code and submit the form.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    </head>

    <body>
        <form action="ratings.php" method="post" id="ratings">
            Insert URL :
            <input type="text" name="id">
            <br> Number Of Reviews:
            <input type="number" name="number">
            <br>
            <!-- Add css to make the span look like button -->
            <span id="submit_form">Submit</span>
        </form>
        <span id="display"></span>
        <script>
        $(document).ready(function(){
            // Initialize submitted with false
            var submitted = false;
            // Onclick Submit span.
            $("#submit_form").click(function(){
                $("#display").html("Processing....");
                // Form is submitted.
                if(!submitted)
                {
                    // Submitting the form using its id.
                    $("#ratings").submit();
                }
                // On first click submitted will be change to true.
                // On the next click the submitted variable will be as true.
                // So the above if condition will not be executed after the first time.
                if(!submitted)
                    submitted= true;
            });
        });
        </script>
    </body>
    </html>

Update

Demo: https://jsfiddle.net/mahendranmails/c43e3utx/1/

Hope it'll help you..

Update

As per suggestion of @ibad-gore you can able to use ajax to process the php file without reloading the page.

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>
    <form action="ratings.php" method="post" id="ratings">
        Insert URL :
        <input type="text" name="id">
        <br> Number Of Reviews:
        <input type="number" name="number">
        <br>
        <!-- Add css to make the span look like button -->
        <span id="submit_form">Submit</span>
    </form>
    <span id="display"></span>
    <script>
    $(document).ready(function(){
        // Initialize submitted with false
        var submitted = false;
        var form=$("#ratings");
        $("#submit_form").click(function(){
            $("#display").html("Processing....");
            // Form is submitted.
            if(!submitted)
            {
                // Submitting the form using ajax.
                $.ajax({
                    type:"POST",
                    url:form.attr("action"),
                    data:$("#ratings input").serialize(),//only input
                    success: function(response, status){
                        if(status=="success")
                        {
                            submitted = false;
                            $("#display").html("Submitted");
                        }
                    }
                });
            }
            // On first click submitted will be change to true.
            // On the next click the submitted variable will be as true.
            // So the above if condition will not be executed after the first time.
            if(!submitted)
                submitted= true;
        });
    });
    </script>
</body>
</html>

Answer 3

Try my answer, I tested it and works fine for me, let's me know if it's as you wanted...

 @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); .box { padding: 20px; margin: 0 auto; display: inline-block; vertical-align: middle; text-align: center; border: #C0C0C0 3px solid; border-radius: 5px; min-width: 270px; height: 240px; font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; background-color: #006699; } .rating { padding: 10px; margin: 0 auto; font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; background-color: darkviolet; color: black; border-radius: 5px; border: #C0C0C0 3px solid; box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15); cursor: pointer; } input { background-color: #C0C0C0; border: 2px solid gray; border-radius: 3px; } #progress { padding: 20px; } .cleardiv { clear: both; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ratings</title> <script type="text/javascript"> function SubmitForm() { StartProgress(); var rating = document.getElementById("rating"); rating.submit(); } function StartProgress() { ProgressImage = document.getElementById('progress_image'); document.getElementById("progress").style.display = "block"; setTimeout("ProgressImage.src = ProgressImage.src", 100); return true; } </script> </head> <body> <div class="box"> <form id="rating" action="ratings.php" method="post"> Insert URL: <br> <input type="text" name="id"> <br><br> Number Of Reviews: <br> <input type="number" name="number"> <br><br> <input class="rating" type="submit" name="rating" onclick="SubmitForm()" value="Rate It"> </form> <div style="display: none" id="progress"> <img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="Task in progress..."> </div> <div class="cleardiv"></div> </div> </body> </html>

Answer 4

Try this version of js:

<script type="text/javascript">
function ButtonClicked()
{
   document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
   document.getElementById("buttonreplacement").style.display = ""; // to display
   return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
   if( FirstLoading )
   {
      FirstLoading = false;
      return;
   }
   document.getElementById("formsubmitbutton").style.display = ""; // to display
   document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
document.onfocus = RestoreSubmitButton;
</script>

Create two buttons and hide one

<input id="buttonreplacement" style="display:none;" type="submit"  Value="Processing . . .">
<input  id="formsubmitbutton" type="submit" Value="Submit">

How to load progress bar “on click” using php

Question

4 answers

solution1
2 ACCPTED 2015-05-27 11:03:34

solution2
1 2015-05-27 09:55:49

solution3
1 2015-05-27 15:08:46

solution4
0 2015-05-27 08:33:35

How to load progress bar “on click” using php

Question

4 answers

solution1 2 ACCPTED 2015-05-27 11:03:34

solution2 1 2015-05-27 09:55:49

solution3 1 2015-05-27 15:08:46

solution4 0 2015-05-27 08:33:35

solution1
2 ACCPTED 2015-05-27 11:03:34

solution2
1 2015-05-27 09:55:49

solution3
1 2015-05-27 15:08:46

solution4
0 2015-05-27 08:33:35