Incompatibilité entre formulaire et button onclick indépendant ?

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
bl-40
Messages : 2
Enregistré le : 12 juil. 2022, 19:07

Incompatibilité entre formulaire et button onclick indépendant ?

Message par bl-40 » 12 juil. 2022, 19:10

Bonjour,

Je souhaite créer une dictée de mots.
Le principe est simple : je propose 4 mots, avec pour chacun, un bouton pour commander à l'ordinateur de le dire à l'oral. La personne tape alors le mot dans un champ texte à côté. Quand la personne a tapé au clavier les 4 mots dans les champs textes associés, il doit alors alors appuyer sur la touche "Envoyer" du formulaire pour que les réponses soient transmises à un fichier "Resultat.php", qui traitera les réponses.

Mon problème vient du "button onclick" utilisé dans le programme ci-dessous : quand j'appuie sur un des boutons commandant à l'ordinateur de dire un mot à l'oral, l'ordinateur dit bien le mot, mais cela lance aussi le fichier "Resultat.php", alors que je n'ai pas appuyé sur le bouton "Envoyer" du formulaire.
Je ne comprends pas ce qui pose problème. Quelqu'un aurait-il une solution ?

Code du programme posant problème :
(remarque : le programme de base est beaucoup plus étoffé (base de données MySQL, PHP), mais je l'ai simplifié ici pour pouvoir zoomer uniquement sur le problème)

<!DOCTYPE html>
<html>

<head>
<title>Dictée de mots</title>

<script language="JavaScript" type="text/javascript">
function parle(texte) {
var message = new SpeechSynthesisUtterance(texte);
message.lang = "fr-FR";
window.speechSynthesis.speak(message);
}
</script>
</head>


<body>

<form method="post" action="Resultat.php" target=_blank>

Mot n°1&nbsp;:&nbsp;&nbsp;
<button onclick = 'parle("une chaise")'>Écouter</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="repa" size="50" />
<br/><br/><br/>

Mot n°2&nbsp;:&nbsp;&nbsp;
<button onclick = 'parle("une table")'>Écouter</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="repb" size="50" />
<br/><br/><br/>

Mot n°3&nbsp;:&nbsp;&nbsp;
<button onclick = 'parle("une craie")'>Écouter</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="repc" size="50" />
<br/><br/><br/>

Mot n°4&nbsp;:&nbsp;&nbsp;
<button onclick = 'parle("un cartable")'>Écouter</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="repd" size="50" />
<br/><br/><br/>

<input type="submit" value="Envoyer" />
</form>
</body>

</html>

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Incompatibilité entre formulaire et button onclick indépendant ?

Message par webmaster » 14 juil. 2022, 11:20

Bonjour,

C'est une subtilité du mode submit

Il faut ajouter un return false dans la function

Code : Tout sélectionner

function parle(texte) {
  var message = new SpeechSynthesisUtterance(texte);
  message.lang = "fr-FR";
  window.speechSynthesis.speak(message);
  return false;
}
Et l'appel se fait avec :

Code : Tout sélectionner

<button onclick = 'return parle("une chaise")'>Écouter</button>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

bl-40
Messages : 2
Enregistré le : 12 juil. 2022, 19:07

Re: Incompatibilité entre formulaire et button onclick indépendant ?

Message par bl-40 » 17 juil. 2022, 09:10

Bonjour,
Effectivement, ça marche maintenant !
Merci beaucoup pour le dépannage :)
Je craignais de rester bloqué à cause de ce problème.

Répondre