8768 sujets

Développement web côté serveur, CMS

[Résolu] Clic fantôme sur un bouton

Bonjour Alsacréateurs, Alsacréatrices,

Voilà j'ai un fichier php/html qui contient :
1 - un formulaire, avec un bouton d'envoi.
2 - Une fois le formulaire sousmis et envoyé, il disparaît, un texte apparait avec un nouveau bouton pour passer à la suite... Sauf que ce dernier texte n'attend pas que le bouton soit cliqué et ne reste qu'une fraction de seconde à l'écran.

Voici le code concerné, avec, dans l'orde, la fin du formulaire, le code de traitement de la soumission du formuaire et de son envoi, et le message de confirmation au bouton facétieux :
<p><button type="button" onclick="myFunction()">envoikas</button><button type="button" id="mailout" onclick="history.back();">abandon</button></p>

	
<p><button type="button" onclick="myFunction()">envoi</button><button type="button" id="mailout" onclick="history.back();">abandon</button></p
</form>
	<script>
	function myFunction() {
	  document.getElementById("mailform").submit();
	  document.getElementById("mailform").reset();
	  document.getElementById("communique").style.display='none';
	  document.getElementById("confirmation").style.display='block';
	  }	
	</script>
	</article> <!--communique-->
	<?php
	if (isset($_POST['pickup_place'])){
		$subject = $_POST['pickup_place'];
		$mail_message = $_POST['nom_envoyeurr'].PHP_EOL.$_POST['mel_envoyeur'].PHP_EOL.PHP_EOL.$_POST['comments'];

		$curl = curl_init();
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($curl, CURLOPT_POST, 1);
		curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
		curl_setopt($curl, CURLOPT_URL, "https://eu-api.smtp2go.com/v3/email/send");
		curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode(array(
				  "api_key" => "api-macléperso",
				  "to" => array(
					0 => "<monadresse@arpenefigourt.bzh>"
				  ),

				  "sender" => "<monadresse@arpenefigourt.bzh>",
				  "subject" => $subject,
				  "text_body" => $mail_message
				)));

		$result = curl_exec($curl);
	}
	?>

	<div id="confirmation">
	Merci</br></br>Votre mail a bien été envoyé

#### ici le bouton qui n'attend pas qu'on le clique... !!!

	<p><button onClick='document.getElementById("confirmation").style.display='none'; document.getElementById("colg").style.display='block';>OK</button></p>
	</div>

Si quelqu'un a une piste... merci !
Modifié par Titen (02 Sep 2024 - 14:14)
Salut

Tu as des problèmes de guillemets autour de ton onclick regarde mieux : 


<button onClick='document.getElementById("confirmation").style.display='none'; document.getElementById("colg").style.display='block';>OK</button>
Salut !

Effectivement mais ça n'a pas l'air de venir de là : comme je n'arrivais pas à me dépatouiller avec les guillemets simples et doubles, j'ai transformé la fin comme ça :

<button onClick="au_revoir();">OK</button>
<script>
	function au-revoir() {
		document.getElementById("confirmation").style.display='none';
		document.getElementById("colg").style.display='block';
		}
</script>


... et le message ne fait toujours que rester une demi-seconde...
Modifié par Titen (03 Sep 2024 - 13:40)
Bonjour, je n'ai pas regardé le premier code, mais dans le deuxième la fonction au_revoir() est différent de la fonction au-revoir().
Dans une autre mesure n'utilisez pas des évènements online. Voir ce qu'en dit la doc MDN => https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#les_gestionnaires_d%C3%A9v%C3%A9nements_en_ligne_ne_les_utilisez_pas_!

Utilisez plutôt addEventListener() :
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Après, on a pas tous le code, mais sache que quand tu fais un "document.getElementById("mailform").submit();" tu recharge entièrement ta page, donc le code sur les lignes d'après ne sont même pas executer. essaye de faire de l'ajax plutôt
Modifié par JENCAL (03 Sep 2024 - 14:28)
Merci de vos remarques.

Pour le au-revoir/au_revoir, il faut que je vous dise que dans mon *vrai* code, ce n'est ni l'un ni l'autre mais "kenavo". Je me disais qu'une traduction en français y gagnerait en lisibilité sémantique...

Je vais essayer de transformer le code en utilisant un event listener quand j'aurai le temps.
Jencal, peux-tu préciser ce que tu entends par :
a écrit :
quand tu fais un "document.getElementById("mailform").submit();" tu recharge entièrement ta page, donc le code sur les lignes d'après ne sont même pas executer

De quelles lignes parles-tu exactement ? parce que la suite du programme se déroule quand même...
Bon bon bon... ça m'énerve.... mais restons calme.
Dernière modif : 

	<div id="confirmation">
	Merci</br></br>Votre mail a bien été envoyé

#### ici le bouton qui n'attend pas qu'on le clique... !!!

	<p><button id="kenavo" type="button">OK</button></p>
	</div>
	<script>
	function kenavo() {
		document.getElementById("colg").style.display='block';
		document.getElementById("confirmation").style.display='none';
	}
		const el = document.getElementById("kenavo");
		el.addEventListener (
			"click", function () { 
			kenavo();}
			, false
			)
	</script>
</body>
</html>


...et toujours le même problème...
Modérateur
tu n'as pas pris en compte
JENCAL a écrit :
Après, on a pas tous le code, mais sache que quand tu fais un "document.getElementById("mailform").submit();" tu recharge entièrement ta page, donc le code sur les lignes d'après ne sont même pas executer. essaye de faire de l'ajax plutôt

ni le conseil
casper2 a écrit :
Utilisez plutôt addEventListener() :
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener


Il n'y a pas de click fantôme, ton formulaire est tout simplement soumis et charge la page demandé, sans definir une page spécifique avec l'attribut action, c'est la page courante qui est rappelé.

remplace document.getElementById("mailform").submit(); par une fonction de type AJAX qui envoi une requête au serveur(vers le script qui va gérer le contenu du formulaire) et attend la réponse pour afficher le message . Cela ne rechargera pas ta page entièrement .


edit
voir https://www.alsacreations.com/tuto/lire/1870-L-API-Fetch-en-JavaScript-qu-est-ce-que-c-est.html
et voici un exemple https://github.com/bobbyhadz/post-form-data-using-javascript-fetch-api
avec son article (anglophone, désolé pas trouvé de lien francophone couvrant juste l'exemple dune soumission de formulaire) https://bobbyhadz.com/blog/post-form-data-using-javascript-fetch-api
Modifié par gcyrillus (04 Sep 2024 - 17:57)
Merci à tous. Je n'ai pas réussi à réécrire mon code en suivant vos conseils. J'ai donc dini par appeler une autre page (action = "traitement-formulaire.php") qui contient le module de confirmation. Et là, tout roule...
Prévenir un modérateur
Répondre au sujet
Aller à