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 👍🏻👍🏻