HTML Loading page while php processes information from a form

Question

I was wondering if someone can help me with this problem I am having. I want to create a loading page that will appear to the user while the PHP file runs a script. Below are the files I wrote and an explanation on what I am trying to do.

1) Index.html: This is the initial page that the user sees. They will enter their first and last name and then hit the submit button. Once they hit the Submit button a PHP script will run.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <form action="saveFile.php?saving=1" id="contact_form" method="post">
                First Name:
                <input type="text" name="fname" id="fname" value="First Name" onblur="if(this.value == '') { this.value = 'First Name'; }" onfocus="if(this.value == 'First Name') { this.value = ''; }" />
                <br>
                Last Name:
                <input type="text" name="lname" id="lname" value="Last Name" onblur="if(this.value == '') { this.value = 'Last Name'; }" onfocus="if(this.value == 'Last Name') { this.value = ''; }" />
                <br>
                <br>
                <input value="Submit" type="submit" />
            </form>
        </div>
    </body>
</html>

2) saveFile.php: This PHP file will save the users input to a text file and then run a bash script that takes the text file and does some random stuff with it. After the script finishes it will return a html file which it will automatically redirect to.

Now here is where I have the issue: I put this GIF which will let people know that the script is running and the next page will come up soon. When I try this, the second page does not show up and it goes straight to the 3rd page. The script and everything runs fine and it works without any problems. What actually happens is, when the user hits the submit button, it shows that the page is loading something and when ready it jumps to the 3rd page. The GIF does not show up at all, the page just jumps from index.html to the 3rd page. I have tried to make the file .html or .php but it gives me the same results. If anybody can give me some tips on how I can get this to work it would be greatly appreciate it.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

    <img src="loading.gif">

    <?php
        $fname = $_POST["fname"];
        $lname = $_POST["lname"];

        $text = $fname . PHP_EOL . $lname; 

        $file = "Contact.txt";
        $fp = fopen($file, "a") or die("Couldn't open $file for writing!");
        fwrite($fp, $text) or die("Couldn't write values to file!");
        fclose($file);

        $output = shell_exec("bash Script.sh");

        header("location:$output");
   ?>

    </body>
</html>

3) $output: This is the last page where the user gets some random information.

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>

        <div>
        <p> Random information </p>
        <a href="index.html" class=home> Click here to go back </a>
        </div>
    </body>
</html>

i guess your php script run quickly so you did not show gif image — Shafiqul Islam, Jul 30 '17 at 15:08
You may want to use Ajax with formdata (https://stackoverflow.com/questions/32421527/formdata-object-not-working-with-jquery-ajax-post) to do this. — Rasclatt, Jul 30 '17 at 16:12

MUHAMMAD Siyab · Answer 1 · 2017-07-30T17:06:55.473

You're redirecting user in saveFile.php, so it will not show the GIF image.

1. First of all, Assign an ID to submit button:

<input value="Submit" type="submit" id="submitForm"/>

2. Move <image src="loading.gif" /> to index.html page, assign an ID to it & set its Display to none using CSS, so that the loading.gif will be hidden by default.

<img src="loading.gif" id="loader" style="display: none"/>

3. Remove header("location:$output"); from saveFile.php.

4. Add the follwing jQuery:

$(document).ready(function(){
    $("#submiForm").click(function(){
        $("#loader").show();   //show loading.gif
        setTimeout(function(){
            window.location = "your page name where you want to redirect";
        });
    }, 5000); //Redirect after 5 seconds..
});

Note: Don't use PHP sleep function for this purpose.

HTML Loading page while php processes information from a form

1 Answers1