Identifier par Name au lieu de Id

**Marion33** · 23/02/2020, 13h28

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**psychadelic** · 23/02/2020, 14h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.getElementsByName('myInput')[0].value = 'toto'

**Marion33** · 23/02/2020, 14h23

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

celà ne fonctionne pas, pourquoi ?

**psychadelic** · 23/02/2020, 15h01

faudrait d'abord écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Marion33** · 23/02/2020, 15h27

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

**psychadelic** · 23/02/2020, 15h33

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Marion33** · 23/02/2020, 15h48

Merci beaucoup 👍🏻👍🏻

Identifier par Name au lieu de Id

JavaScript

Discussions similaires

Partager

Partager