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

A voir également:

Minuterie après submit
Onchange submit ✓ - Forum Javascript
Minuterie tv tcl - Forum Téléviseurs
Réglage minuterie tv samsung - Forum Matériel & Système
Submit wolf - Télécharger - Divers Web & Internet
Hidden submit ✓ - Forum Webmastering

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

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

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

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

Discussions similaires

Mise en veille de téléviseur tcl

délai OSD

qu'est que OSD

minuterie télévision TCL séries P73

régler l'écran sans passer par le menu OSD ?

Discussions similaires

Newsletters