Minuterie après submit

Résolu

Brunodurant Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Brunodurant Messages postés 13 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Minuterie après submit
Minuterie tv tcl - Forum Téléviseurs
Minuterie télévision TCL séries P73 - Forum Téléviseurs
Minuterie osd ✓ - Forum Access
Minuterie pc - Télécharger - Personnalisation
Minuterie tv thomson - Forum Enceintes / HiFi

4 réponses

Réponse 1 / 4

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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

Réponse 2 / 4

Brunodurant Messages postés 13 Date d'inscription Statut Membre Dernière intervention

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

Réponse 3 / 4

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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>

Réponse 4 / 4

Brunodurant Messages postés 13 Date d'inscription Statut Membre Dernière intervention

C'est génial, Pitet, ça marche super bien.

Merci beaucoup pour ton aide et tes conseils.

A bientôt

Bruno

Discussions similaires

qu'est que OSD

délai OSD

mise en veille programmable thomson 32HZ5006

Mise en veille de téléviseur tcl

probleme minuterie

Votre réponse

Discussions similaires