Sujet Précédent Sujet Suivant

Incompatibilité entre formulaire et onclick indépendant ?

Résolu
bl-40 - Modifié le 13 juil. 2022 à 10:33
 bl-40 - 13 juil. 2022 à 22:50

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 :          
        <button onclick = 'parle("une chaise")'>Écouter</button>
            
        <input type="text" name="repa" size="50" />
        <br/><br/><br/>

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

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

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

        <input type="submit" value="Envoyer" />
        </form>
</body>
    
</html>
A voir également:

2 réponses

Réponse 1 / 2
@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 146
13 juil. 2022 à 10:38

bonjour essai en rajoutant un preventDefault() a la fonction

function parle(texte,evt) {

    evt.preventDefault()

    var message = new SpeechSynthesisUtterance(texte);
    message.lang = "fr-FR";
    window.speechSynthesis.speak(message);
    }  
 <button onclick = 'parle("une table",event)'>Écouter</button>

rien ne sert de courir il faut partir a point.
cours Forest cours !
1
Réponse 2 / 2
bl-40
13 juil. 2022 à 22:50

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