Activer une minuterie après un submit

Version imprimable

12/02/2022, 21h49
Brunodurant42

Activer une minuterie après un submit

Bonjour à tous,

J'ai un projet mais je rencontre un soucis.

J'ai développé un petit formulaire en php et je souhaiterai, qu'une fois l'utilisateur clique sur "envoyer", une minuterie se déclenche (de quelques secondes par exemple), avant que la page suivante (après la page formulaire) s'affiche.

Pour être plus clair:

1) l'utilisateur saisie ses réponses
2) il clique sur "envoyer"
3) une minuterie se déclenche
4) la page suivante s'affiche

Le problème est que je ne sais pas quelles sont les fonctions que je dois utiliser dans Javascript (si cela est possible).

Si l'un d'entre vous avez juste des idées des noms de fonction à me donner pour que je puisse me "former" ça serait super. J'ai trouvé les classes "Timer", "ScheduledExecutorService" mais je ne suis pas sûr que se soit bon pour mon projet.

Merci à tous

Bruno
13/02/2022, 04h01
mathieu

est ce que vous avez juste fait un formulaire de test qui ne fait rien ? ou alors le formulaire envoie ses données à du code côté serveur ?

Bonjour Mathieu

Merci pour ta réponse.

Désolé pour le temps de réponse, j'ai essayé de creuser le sujet.

Alors mon idée serait d'envoyer les saisies du formulaire sur ma base SQL.

J'ai appliqué une solution que l'on m'a proposé et qui fonctionne bien. Mais, je bute "juste" sur un truc.

Dans mon projet, chronologiquement", j'aimerai que l'utilisateur saisisse, il clique sur "Envoyer", le décompte commence, et à la fin du décompte, le formulaire est envoyé à page.php

Jusque là j'arrive à tout. Mais lorsque je clique sur "Envoyer" le décompte et l'envoi à la page.php se font en même temps. Je n'arrive pas à faire l'un après l'autre.

Voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <form name="f" action="https://blabla/page.php" method="post" enctype="multipart/form-data" target="_self"> Votre nom: <input type="text" name="nom" id="nom"><br> Votre prénom: <input type="text" name="prenom" id="prenom"><br> <input type="button" onclick="start();submit('f')">Envoyer</button> </form> <script> var counter = 10; var intervalId = null; function finish() { clearInterval( intervalId ); document.getElementById( "bip" ).innerHTML = "TERMINE!"; } function bip() { counter--; if ( counter == 0 ) finish(); else { document.getElementById( "bip" ).innerHTML = counter + " secondes restantes";}} function start() { intervalId = setInterval( bip, 1000 );} </script>
Je pense que mon erreur est double.
J'ai marqué ceci: onclick="start();submit('f')" et donc, ça se déclenche en même temps

Une autre solution à laquelle j'avais pensé :document.getElementById( "bip" ).innerHTML = "TERMINE!"; }, au lieu d'afficher "TERMINE!", l'idée serait d'envoyer via le lien https://blabla/page.php à la page.php, mais je me suis rendu compte que je ne savais pas le faire.

Est-ce que tu pourrais, peut-être, m'aiguiller ?

Encore merci et à bientôt

Bruno

15/02/2022, 15h11
mathieu

je comprends mieux maintenant, avec votre 1er message je croyais que vous vouliez envoyer la requete au clic sur le bouton et retarder l'affichage de la réponse.

d'après ce que j'ai vu de votre code, je pense que vous y êtes presque arrivé. essayez de mettre l'appel à "submit(f)" à la fin de la fonction "finish".

Super génial, ton idée marche super bien

Voilà, ce que j'ai fait avec l'aide que tout le monde m'a apporté sur les forums.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form id="form-blabla" name="f" action="https://blabla/page.php" method="post" enctype="multipart/form-data" target="_self">
  Votre nom: <input type="text" name="nom" id="nom"><br>
  Votre prénom: <input type="text" name="prenom" id="prenom"><br>
  <input type="button" onclick="start();" value="Envoyer">
</form>
 
<div id="bip"></div>
 
 
<script>
        var counter = 10;
var intervalId = null;
 
function start(){
  intervalId = setInterval(bip, 1000);
}
 
function finish(){
  clearInterval(intervalId);
  document.getElementById("bip").innerHTML = "TERMINE!";
  
  document.getElementById("form-blabla").submit();
}
 
function bip(){
  counter--;
 
  if (counter == 0) {
    finish();
  } else {
    document.getElementById("bip").innerHTML = counter + " secondes restantes";
  }
}
 
</script>

Encore merci

A bientôt

Bruno