Identifier par Name au lieu de Id

Version imprimable

Bonjour,

Voici mon script qui permet de pr�remplir un champ et de cliquer automatiquement sur le bouton "entrer".
Je voudrais utiliser "name" au lieu de "id" pour identifier mon bouton,
donc remplacer "document.getElementById" par "document.getElementsByName" dans la fonction "clic" mais je n'arrive pas � faire fonctionner le script.

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<body>
 
<h3>Prefill & autoclick</h3>
 
<input id="myInput">
<input value="Entrer" type="submit" name="testname" id="myBtn" onclick="javascript:alert('Clicautomatique')">
 
<script>
 
       function lp()
        {
         var couleur = document.getElementById("myInput");
          if (couleur != null) {
          couleur.value = "rouge";
          return;
        }
          setTimeout(function(){lp();}, 100);
        }
              setTimeout(function(){lp();}, 100);
       
       function clic()
        {
          evt = document.createEvent("MouseEvents");
          evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
          document.getElementById("myBtn").dispatchEvent(evt);
         }
          
         setTimeout(clic,1000);
 
</script>
</body>

Apr�s je me disais, existe t'il un moyen "d'appuyer automatiquement sur la touche Entr�e SI le champs est rempli" ?

Je vous remercie pour votre aide,
Marion

23/02/2020, 14h09
psychadelic

salut...
Est-ce que tu as remarqu� que la m�thode getElementsByName �tait obligatoirement plurielle ?

Code:

document.getElementsByName('myInput')[0].value = 'toto'
23/02/2020, 14h23
Marion33

oui tout � fait, mais quand je remplace (ligne 27, celle qui m'interesse):

Code:

document.getElementById("myBtn").dispatchEvent(evt);

par:

Code:

document.getElementsByName("testname").dispatchEvent(evt);

cel� ne fonctionne pas, pourquoi ?
23/02/2020, 15h01
psychadelic

faudrait d'abord �crire

Code:

document.getElementsByName("testname")[0].dispatchEvent(evt);

sinon on peut envoyer un event sur un input, et m�me le recup�rer avec "listener d'event" mais ce n'est pas pour autant que le m�canisme de l'envoi (ici ton "click" ) sera trait� comme tel par le navigateur.

C'est un m�canisme de s�curit� ( il doit y avoir une trace quelque part dans les directives du W3C).

sinon ,un script pourrait tr�s bien pr�remplir un formulaire d'achat et d'envoyer une commande � l'insu de n'importe quel internaute.
23/02/2020, 15h27
Marion33

Je comprends, merci, donc si je comprends bien il n'y a pas d'autres solutions que mon script pour auto click?

Si, c'est un m�canisme natif sur les formulaires, mais comme tu n'utilises pas de formulaire alors ce m�canisme n'est pas actif.

faut aussi inhiber l'envoi du formulaire sinon la page se recharge automatiquement, et cherche � envoyer ses donn�es

PS; Oui tout ce qui touche aux objets de formulaires (les seuls a avoir un attribut name) ont un comportement un peu irrationnels.

�a se code de cette mani�re:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Prefill & autoclick</title> </head> <body> <h3>Prefill & autoclick</h3> <form id="my-form"> <input type="text" name="myInput"> </form> <script> const myForm = document.getElementById('my-form') ; // "Prefill" myForm.myInput.value = 'toto' // on peut se servir du name directement en se référant a son formulaire parent ; // aussi déclenché quand on tape sur la touche Entée du clavier myForm.onsubmit=e=> { e.preventDefault() // empeche l'envoi réel du formulaire alert( `valeur entrée = ${myForm.myInput.value}`) } </script> </body> </html>

23/02/2020, 15h48
Marion33

Merci beaucoup 👍🏻👍🏻