transformer 'Select' en boutons radios

Version imprimable

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:

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:

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:

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

14/09/2010, 13h58
SpaceFrog

ne serait il pas plus simple / clair
d'avoir deux fields set et de basculer leur display ?

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:

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…

;)

14/09/2010, 15h47
E.Bzz

Bonjour,

Citation:

Envoyé par Watilin

les <input> [...] ne déclenchent jamais d’évènement change.

le reste, OK, mais ça c'est faux ;)

A+
14/09/2010, 21h03
Watilin

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é.

;)