IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Ajouter un événement à tous les checkbox


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut Ajouter un événement à tous les checkbox
    Salut,

    J'essaie d'utiliser le framework prototype 1.5 pour ajouter un évènement click à tous les checkbox de mon formulaire, si possible sans faire de boucle. Sinon je ne vois vraiment pas l'intérêt de prototype!

    Malheureusement la seule chose que j'ai réussi à faire c'est ajouter un évènement à un élément précise grâce à son id. Ce qui implique que si je souhaite l'ajouter à tous les checkbox je dois faire une boucle.

    Ce qui fonctionne:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    Event.observe(document.getElementById('10DernieresBP2'), 'click', function(event) {
        alert("coucou");
    });
    Ce qui ne fonctionne pas:
    Code : 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
    //ne génère pas d'erreur mais aucune alerte n'apparaît
    Event.observe(document.getElementsByTagName('10DernieresBP2'), 'click', function(event) {
        alert("coucou");
    });
     
    //retourne "element has no properties"
    Event.observe('input', 'click', function(event) {
        alert("coucou");
    });
     
    //retourne "element has no properties"
    Event.observe('input[type="checkbox"]', 'click', function(event) {
        alert("coucou");
    });
     
    //retourne "$("input[type=\"checkbox\"]") has no properties" is not a function
    $$('input[type="checkbox"]').observe('click', function(event) {
        alert("coucou");
    });
     
    //retourne "$$("input[type=\"checkbox\"]") is not a function"
    $$('input[type="checkbox"]').observe('click', function(event) {
        alert("coucou");
    });
    Donc est-ce possible? Si oui, comment?

    Merci par avance pour vos réponses.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    à l'ancienne:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var TabInputs =document.getElementsByTagName('input');
     
    var TabChecks=new Array();
     
    for (i=0;i<TabInputs.length;i++){
     if (TabInputs[i].type.toLowerCase()="checkbox"){TabCheck.push(TabInputs[i])}
    }
     
    for (j=0;j<TabChecks.length;j++){
    TabChecks[i].onclick=function(){alert("coucou"};
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Nan mais j'aurais quand même voulu faire ça en une seule ligne, vu que l'appli utilise prototype...

    Décidément j'accroche pas, je vois pas ce qu'on lui trouve, mais bon c'est pas le sujet.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    A piori d'après ce que j'ai pu rechercher il faut passer par un turc du style ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var TabInputs =document.getElementsByTagName('input');
     
    for (i=0;i<TabInputs.length;i++){
     if (TabInputs[i].type.toLowerCase()="checkbox"){Event.observe(TabInputs[i], 'click', function(event) {
        alert("coucou");
    });}
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Justement ça n'a aucune intérêt! Avec jquery ça donne une ligne de mémoire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('input[type="checkbox"]').click(function() {
        alert("coucou");
    });
    Finalement je l'ai fait à l'ancienne...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var tabInput = document.getElementsByTagName('input');
    var tabCheck = new Array();
     
    for (i=0;i<tabInput.length;i++) {
        if (tabInput[i].type.toLowerCase()=="checkbox"){tabCheck.push(tabInput[i])}
    }
     
    for (j=0;j<tabCheck.length;j++){
        tabCheck[j].onclick = function(){  
                 alert("coucou");
            });
        };
    }
    Après deux/trois petites corrections

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Février 2006
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 19
    Par défaut En une ligne ?
    Salut,

    j'ai lu cette discussion car je cherchais à faire en sorte que sur l'appui d'entrée quand le focus est sur un select, mon formulaire de recherche soit posté, mais pas n'importe quel submit.

    Au début, j'ai fait un onkeypress= document.monForm.submit() sur le <select>, mais le submit en question n'était pas identifiable. En effet, ayant plusieurs boutons de type submit, le premier caché pour l'appui sur entrée dans des input type text, des boutons 'Ajouter', 'Supprimer', 'Nouvelle recherche', et 'Recherche', je veux que ce soit le bouton 'Recherche' qui soit l'auteur de la soumission, afin de retrouver dans l'url postée : &rechercheBouton=Recherche par exemple.

    Le code ci dessous, fait une ligne (xD), et branche sur tous les <select>, une action sur l'appui de la touche Entrée

    La version en une ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $A(document.getElementsByTagName("select")).each(function (leSelect) { Event.observe($(leSelect), "keydown", function(event){ if (event.keyCode == 13) { document.monForm.monBoutonSubmit.click(); } return false; }.bindAsEventListener($(leSelect)) ); }); }, false);
    Maintenant la version compréhensible à la vue

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    Event.observe(window, "load", function(event){
    $A(document.getElementsByTagName("select")).each(function (leSelect) {
    	Event.observe($(leSelect), "keydown", function(event){
    		if (event.keyCode == 13) {
    			document.monForm.monBoutonSubmit.click();
    		}
    		return false;
    		}.bindAsEventListener($(leSelect))
    	);
    });
     
    }, false);
    Ce code a été testé pour :
    • Firefox 2.0.0.11
    • IE 6
    • IE 7
    • Safari 3.0.3 For windows

Discussions similaires

  1. [Requête/SQL]Ajouter un enregistrement à tous les membres
    Par fernandino dans le forum Requêtes et SQL.
    Réponses: 3
    Dernier message: 18/04/2007, 17h45
  2. Réponses: 2
    Dernier message: 14/09/2006, 14h24
  3. requete ajout caractere sur tous les champs d'une table
    Par lorenzo74 dans le forum Requêtes et SQL.
    Réponses: 4
    Dernier message: 24/06/2006, 13h34
  4. [checkbox] Sélectionner tous les checkbox
    Par GLDavid dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 02/05/2006, 17h05
  5. Sélection automatique de tous les checkbox d'un dbgrid
    Par bertrand_declerck dans le forum Bases de données
    Réponses: 3
    Dernier message: 19/08/2005, 09h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo