Ajouter onblur à un input en javascript

Bonjour.

Je suis devant un petit problème qui est le suivant:
J'ai l'input (généré en php):

<input name="ref_id" type="text" id="ref_id" value="'.$ref_id.'" maxlength="50" >

Je souhaite qu'il se transforme en ceci :

<input [b]onblur="verif_si_existe(); return false;"[/b] name="ref_id" type="text" id="ref_id" value="'.$ref_id.'" maxlength="50">

Cela marche mais je voudrai que cette transformation se fasse sans toucher au html initial (appréciable pour les mises à jour, etc.). Il me semble qu'en javascript, on peut le faire.

J'ai bien lu que c'est de la forme

var input = document.getElementsByTagName("input");
input.onblur = verif_si_existe();

Honnêtement, je ne sais pas comment appliquer ça à mon cas.
Il faudra peut être ajouter une référence à cet input en particulier (via name?) car il y en a une disaine d'autres sur la même page.

Une aide sera bien appréciable.
Merci.
Modifié par TusMad (26 Nov 2007 - 04:54)

Salut,

Tu ne peux pas proceder de la sorte car document.getElementsByTagName renvoit une nodeList, et donc il te faut itérer sur celle ci pour ajouter l'event handler.

var i;
var inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++) {
        inputs[ i].onblur = lafunction;
}

Une deuxième chose, si tu écris :

input.onblur = verif_si_existe();

Tu éxecutes la fonction directement, ça ne fonctionnera donc pas, tu dois faire une référence à ta fonction :

input.onblur = verif_si_existe;

Modifié par Julien Royer (26 Nov 2007 - 09:23)

Merci,

Cela marche bien.

Une dernière petite question si je peux me permettre. Est ce qu'il serai possible de spécifier l'action sur l'input name="ref_id" uniquement. Là il me semble qu'il ajoute l'action à tous les inputs.

Merci bien.

Salut,

tu peux faire :

var input = document.getElementById("ref_id");
input.onblur = lafunction;

A+

TusMad a écrit :
Est ce qu'il serai possible de spécifier l'action sur l'input name="ref_id" uniquement.

En utilisant getElementsByName plutôt que getElementsByTagName, par exemple?

document.getElementsByName("ref_id")[0].onblur = verif_si_existe;

S'il n'y a qu'un seul élément dont l'attribut name a pour valeur "ref_id", ça devrait marcher. S'il peut y en avoir plusieurs (par exemple pour des input de type checkbox), il faudra utiliser le mécanisme de boucle proposé par Shinuza. Ce qui donnerait:

var inputs = document.getElementsByName("ref_id");
for (var i=0; i<inputs.length; i++) {
	inputs[ i ].onblur = verif_si_existe;
}

Heyoan a écrit :
tu peux faire :

var input = document.getElementById("ref_id");
input.onblur = lafunction;

Sauf que "ref_id" n'est pas la valeur d'un attribut id mais d'un attribut name.

TusMad a écrit :
J'ai l'input (généré en php):

<input name="ref_id" type="text" [b]id="ref_id"[/b] value="'.$ref_id.'" maxlength="50" >

Euh... /me a mal compris ?

Ah, j'avais pas fait gaffe au code HTML, je m'étais focalisé sur la demande de TusMad (que je cite: «Est ce qu'il serai possible de spécifier l'action sur l'input name="ref_id" uniquement.»).