Sujet Précédent Sujet Suivant

Minuterie après submit

Résolu/Fermé
Brunodurant Messages postés 13 Date d'inscription dimanche 14 novembre 2021 Statut Membre Dernière intervention 23 août 2022 - Modifié le 12 févr. 2022 à 21:52
Brunodurant Messages postés 13 Date d'inscription dimanche 14 novembre 2021 Statut Membre Dernière intervention 23 août 2022 - 15 févr. 2022 à 17:55
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

4 réponses

Réponse 1 / 4
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
13 févr. 2022 à 12:18
Bonjour,

Tu peux utiliser la fonction JavaScript setInterval() pour exécuter du code à intervalles réguliers, par exemple à chaque seconde, et ainsi réaliser une minuterie/un timer.
https://developer.mozilla.org/en-US/docs/Web/API/setInterval

Un exemple de minuterie/timer :
https://www.xul.fr/ecmascript/settimeout.php
0
Réponse 2 / 4
Brunodurant Messages postés 13 Date d'inscription dimanche 14 novembre 2021 Statut Membre Dernière intervention 23 août 2022
15 févr. 2022 à 14:36
Bonjour Pitet

Merci beaucoup.

J'ai appliqué ta solution qui marche super bien. 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: 


<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
0
Réponse 3 / 4
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
15 févr. 2022 à 16:57
Tu y était presque, il faut juste soumettre le formulaire dans ta fonction finish().
Pour faire cela, le plus simple est d'ajouter un identifiant sur la balise form afin de pouvoir la récupérer en js via getElementById() puis appeler la fonction submit() : 

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



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";
  }
}


Au passage, attention à la syntaxe html. Le bouton du formulaire doit être soit une balise input, soit une balise button, mais pas un mélange des deux ;) 
<form>
  <button type="button" onclick="start();">Envoyer</button>
  <!-- ou -->
  <input type="button" onclick="start();" value="Envoyer">
</form>
0
Réponse 4 / 4
Brunodurant Messages postés 13 Date d'inscription dimanche 14 novembre 2021 Statut Membre Dernière intervention 23 août 2022
15 févr. 2022 à 17:55
C'est génial, Pitet, ça marche super bien.

Merci beaucoup pour ton aide et tes conseils.

A bientôt

Bruno
0

Discussions similaires

délai OSD
Utilisateur anonyme -
toto -

3 réponses
qu'est que OSD
Suzanne903 -
inconu -

3 réponses
mise en veille programmable thomson 32HZ5006
abedidadi -
Mimi -

8 réponses
minuteur
le meruvien -
le meruvien -

7 réponses
TV Samsung : réglage de la minuterie
donzougue -
Sab_bhl -

10 réponses