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

JavaScript Discussion :

transformer 'Select' en boutons radios


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Inscrit en
    Septembre 2010
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 1
    Points : 1
    Points
    1
    Par défaut transformer 'Select' en boutons radios
    bonjour
    question de débutant, mais je ne sais pas par quel bout le prendre...

    J'ai pour l'instant ça qui fonctionne dans un menu de recherche :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <select name="mod" size="2" class="selectSearchHome" id="mod" style="width: 150px" onChange="updateprices(this.selectedIndex,'')">
              <option {if $mod=='sale'} selected="selected" {/if } value="sale">For Sale</option>
              <option {if $mod=="rent"} selected="selected" {/if } value="rent">For Rent</option>
             </select>
    et je voudrai le remplacer par :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input name="mod" type="radio" id="mod" value="sale" {if $mod=='sale'} checked="checked" {/if } onChange="updateprices(this.selectedIndex,'')"/>FOR SALE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <input name="mod" type="radio" id="mod" value="rent" {if $mod=='rent'} checked="checked" {/if }  onChange="updateprices(this.selectedIndex,'')"/>FOR RENT
    Et je rencontre le problème suivant:
    - la fonction onchange est lancée (apparemment) mais pas avec les bons paramètres (le résultat supposé est de mettre à jour un autre select du même form de recherche)

    voila la fonction onchange appelée :
    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
    var prices=new Array();
    prices[0]=["< 100.000\u20AC |0-100000","100.000\u20AC  - 200.000\u20AC|100000-200000""];
    prices[1]=["< 1.000\u20AC |0-1000","1.000\u20AC  - 2.000\u20AC |1000-2000","2.000\u20AC  - 3.000\u20AC |2000-3000"];
     
    function updateprices(selectedtypegroup, mod){
    	var propertiesType=document.formSale.type;
    	var priceslist=document.formSale.price;
    	if(mod == 'rent') {
    		selectedtypegroup = 1;
    	}
    	$("#price").dropdownchecklist("destroy");
    	priceslist.options.length=1;
    	for (i=0; i<prices[selectedtypegroup].length; i++){
    		var newOpt = new Option(prices[selectedtypegroup][i].split("|")[0], prices[selectedtypegroup][i].split("|")[1]);		
    		priceslist.options[priceslist.options.length]=newOpt;
    	}
        $("#price").dropdownchecklist({ emptyText: "Please select ...", firstItemChecksAll: true, maxDropHeight: 150 });
    }
    merci de vos réponses ou pistes et idées!
    a+
    Gesatzs

  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 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    ne serait il pas plus simple / clair
    d'avoir deux fields set et de basculer leur display ?

  3. #3
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    Salut,
    je sais que tu es débutant et qu’il faut être indulgent mais je tiens à le dire : ton code pique les yeux.
    Quand tu auras un peu d’expérience, essaye de te débarasser rapidement des attributs onchange, onclick, etc. Je vois que tu utilises jQuery, et ce framework permet de faire des gestionnaires d’évènements.
    Essaye aussi d’utiliser le moins possible d’attributs style. Des styles déclarés en dehors de la feuille CSS, y’a rien de pire quand tu veux retoucher le design après.

    Bon.

    Pour ton problème, tu as changé de balise HTML, et cela a entrainé un grand nombre de changements du point de vue JavaScript. En particulier, les <input> n’ont pas d’attribut selectedIndex, et ne déclenchent jamais d’évènement change. La seule chose qui relie plusieurs <input> entre eux, c’est leur attribut name. Et pour des boutons radio, un seul d’entre eux peut être checked quand ils ont le même name.

    Je pense que le plus simple serait que tu remplaces tes onchange par des onclick et que tu codes « en dur » les selectedIndex, comme ceci (avec des <label> pour l’ergonomie) :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <label>
    	<input name="mod" type="radio" value="sale"
    		{ if $mod == 'sale' }checked="checked"{ /if }
    		onclick="updateprices(0, '')" />
    	FOR SALE
    </label>
    <label>
    	<input name="mod" type="radio" value="rent"
    		{ if $mod == 'rent' }checked="checked"{ /if }
    		onclick="updateprices(1, '')" />
    	FOR RENT
    </label>
    J’ai viré les id, tu n’as pas le droit d’avoir deux fois le même, et a priori ils ne te servaient à rien…


  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    Citation Envoyé par Watilin Voir le message
    les <input> [...] ne déclenchent jamais d’évènement change.
    le reste, OK, mais ça c'est faux

    A+

  5. #5
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    Wot wot wot, j'aurais parlé trop vite ?
    En effet, ils déclenchent change et click en même temps. Hmm, voilà qui me perturbe, lequel est le plus accessible ? Je ferai des tests demain...

    Edit: En fait c'est change le plus pertinent, car avec click ça déclenche l'action même si on clique sur la bouton qui est déjà coché.


Discussions similaires

  1. selection bouton radio +liste
    Par erox44 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 13/03/2008, 11h21
  2. Selection de panel par bouton radio et mise en forme
    Par sunvialley dans le forum ASP.NET
    Réponses: 2
    Dernier message: 07/01/2008, 10h45
  3. Contrôle saisi bouton radio ou select
    Par pascale86 dans le forum Langage
    Réponses: 1
    Dernier message: 19/11/2007, 16h45
  4. Selection bouton radio
    Par Greggggggg dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 23/08/2006, 18h22
  5. selection de boutons radios par défaut
    Par boss_gama dans le forum ASP
    Réponses: 5
    Dernier message: 12/07/2006, 08h45

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