HTML Chargement de la page pendant que php traite les informations d'un formulaire

Je me demandais si quelqu'un pouvait m'aider avec ce problème. Je veux créer une page de chargement qui apparaîtra à l'utilisateur pendant que le fichier PHP exécute un script. Voici les fichiers que j'ai écrits et une explication sur ce que j'essaie de faire.HTML Chargement de la page pendant que php traite les informations d'un formulaire

1) Index.html: Il s'agit de la page initiale que l'utilisateur voit. Ils entreront leur nom et prénom et ensuite frapper le bouton de soumission. Une fois qu'ils ont appuyé sur le bouton Envoyer, un script PHP sera exécuté.

<!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: Ce fichier PHP sauvera l'entrée des utilisateurs dans un fichier texte, puis exécuter un script bash qui prend le fichier texte et fait des choses au hasard avec elle. Une fois le script terminé, il renverra un fichier html vers lequel il se redirigera automatiquement.

Maintenant, voici où j'ai le problème: J'ai mis ce GIF qui permettra aux gens de savoir que le script est en cours d'exécution et la prochaine page viendra bientôt. Quand j'essaye ceci, la deuxième page n'apparaît pas et elle va directement à la 3ème page. Le script et tout fonctionne bien et cela fonctionne sans aucun problème. Ce qui se passe en réalité, c'est que lorsque l'utilisateur appuie sur le bouton Soumettre, il montre que la page est en train de charger quelque chose et quand il est prêt, il saute à la 3ème page. Le GIF n'apparaît pas du tout, la page saute simplement d'index.html à la 3ème page. J'ai essayé de faire le fichier .html ou .php mais cela me donne les mêmes résultats. Si quelqu'un peut me donner quelques conseils sur la façon dont je peux faire fonctionner cela, je l'apprécierais grandement.

<!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) Sortie $: Ceci est la dernière page où l'utilisateur obtient des informations aléatoires.

<!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>

Source

2017-07-30 Nicolas Gomez

Je suppose que votre script PHP s'exécute rapidement donc vous n'avez pas montré l'image gif –

vous pouvez utiliser

Vous pouvez utiliser Ajax avec formdata (https://stackoverflow.com/questions/32421527/formdata-object-not-working-with- jquery-ajax-post) pour ce faire. – Rasclatt

Vous redirigez l'utilisateur dans saveFile.php, donc il ne sera pas montrer l'image GIF.

1. Tout d'abord, attribuez un identifiant le bouton d'envoi:

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

2. Déplacer <image src="loading.gif" /> à index.html page attribuer un identifiant à elle & définir son affichage En utilisant CSS, de sorte que le loading.gif sera caché par défaut.aucun

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

3. Retirez header("location:$output"); de saveFile.php.

4. Ajouter follwing la 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: Ne pas utiliser la fonction PHP sleep à cette fin.

Source

2017-07-30 16:56:08

Cela vous a-t-il été utile? –

HTML Chargement de la page pendant que php traite les informations d'un formulaire

Répondre

Questions connexes