Une question input avec id

Fermé
romeo - 1 févr. 2017 à 11:05
 1bloke - 2 févr. 2017 à 18:39
Bonjour,

j'ai un selec loisir avec des mots cinema musique etc...
et j'ai mis
id=cinema"
id=musique"

là pas de souci

et j'ai mis un autre selec sortie avec des mots balader, cinéma musique

id=cinema"
id="balader"


là il me dit erreur d'id sur cinema

car il voit 2 fois id cinema

comment je peut faire quand j'ai 2 id avec le même mot

es-ce que je dois metre id="cinema1" et id="cinema2"

merci

4 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
1 févr. 2017 à 12:12
Salut,

Les attributs id doivent être uniques, tu ne dois pas avoir deux id avec la même valeur.

Néanmoins tes balises select ne devraient pas avoir besoin d'attributs id. Ta balise select doit posséder un attribut name pour récupérer le choix de l'utilisateur et contenir des balises option possédant des attributs value :
<select name="monselect">
  <option value="valeur1">Valeur 1</option> 
  <option value="valeur2">Valeur 2</option>
  <option value="valeur3">Valeur 3</option>
</select>


Essaye de n'utiliser les attributs id uniquement pour créer des ancres ou pour effectuer des traitements en javascript.

Bonne journée,
1
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 févr. 2017 à 12:10
Bonjour,

1 - Il nous faut ton code "exact".

2 - L'erreur... elle vient d'où ? Javascript ? Php ? Autre ??
A quelle moment se produit-elle ?

Sans ses infos.. impossible de te répondre.


0
arffffff

voilà html d'un selec ou on coche les loisirs


      <dl class="dropdown multiple-choix select-loisir-loisir">
	  <dt class="hida1 icon-select">loisir</dt>
	  <dd class="mutliSelect1"><ol>
	  <li><input type="checkbox" id="musique" name="musique" value="musique" />musique</li>
	  <li><input type="checkbox" id="voyage" name="voyage" value="voyage" />voyage</li>
	  <li><input type="checkbox" id="sport" name="sport" value="sport" />sport</li>
	  <li><input type="checkbox" id="balades" name="balades" value="balades" />balades</li>
	  <li><input type="checkbox" id="cuisine" name="cuisine" value="cuisine" />cuisine</li>
	  <li><input type="checkbox" id="nature" name="nature" value="nature" />nature</li>
	  <li><input type="checkbox" id="shopping" name="shopping" value="shopping" />shopping</li>
	  <li><input type="checkbox" id="bricolage" name="bricolage" value="bricolage" />bricolage</li>
	  <li><input type="checkbox" id="lecture" name="lecture" value="lecture" />lecture</li>
	  <li><input type="checkbox" id="danse" name="danse" value="danse" />danse</li>
	  <li><input type="checkbox" id="jardinage" name="jardinage" value="jardinage" />jardinage</li>
	  <li><input type="checkbox" id="expositions/muses" name="expositions/muses" value="expositions/musés" />expositions/musées</li>
	  <li><input type="checkbox" id="ecriture" name="ecriture" value="ecriture" />ecriture</li>
	  <li><input type="checkbox" id="animaux" name="animaux" value="animaux" />animaux</li>
	  <li><input type="checkbox" id="television" name="television" value="télévision" />télévision</li>
	  <li><input type="checkbox" id="automobiles" name="automobiles" value="automobiles" />automobiles</li>
	  <li><input type="checkbox" id="informatique/internet" name="informatique/internet" value="informatique/internet" />informatique/internet</li>
	  <li><input type="checkbox" id="photo" name="photo" value="photo" />photo</li>
	  <li><input type="checkbox" id="jeux-videos" name="jeux-videos" value="jeux vidéos" />jeux vidéos</li>
	  <li><input type="checkbox" id="chant/instrument-musical" name="chant/instrument-musical" value="chant/instrument musical" />chant/instrument musical</li>
	  <li><input type="checkbox" id="decoration" name="decoration" value="décoration" />décoration</li>
	  <li><input type="checkbox" id="l-art" name="l-art" value="l'art" />l'art</li>
	  <li><input type="checkbox" id="cinema" name="cinema" value="cinéma" />cinéma</li>
	  <li><input type="checkbox" id="jeux-de-cartes" name="jeux-de-cartes" value="jeux de cartes" />jeux de cartes</li>
	  <li><input type="checkbox" id="oenologie" name="oenologie" value="oenologie" />oenologie</li>
	  <li><input type="checkbox" id="peinture-dessin" name="peinture-dessin" value="peinture/dessin" />peinture/dessin</li>
	  <li><input type="checkbox" id="jeux-de-societes" name="jeux-de-societes" value="jeux de sociétés" />jeux de sociétés</li>
	  <li><input type="checkbox" id="theatre" name="theatre" value="théatre" />théatre</li>
	  <li><input type="checkbox" id="restaurant" name="restaurant" value="restaurant" />restaurant</li>
	  <li><input type="checkbox" id="les-sorties" name="les-sorties" value="les sorties" />les sorties</li>
	  <li><input type="checkbox" id="voir-des-amis" name="voir-des-amis" value="voir des amis" />voir des amis</li>
	  <li><input type="checkbox" id="activite-caritative" name="activite-caritative" value="activité caritative" />activité caritative</li>
	  <li><input type="checkbox" id="peche/chasse" name="peche/chasse" value="peche/chasse" />peche/chasse</li>
	  <li><input type="checkbox" id="loisirs-creatifs" name="loisirs-creatifs" value="loisirs créatifs" />loisirs créatifs</li>
	  <li><input type="checkbox" id="autres" name="autres" value="autres" />autres</li>
	  </ol></dd></dl>
	  <span class="choix-membre"></span>




et voilà un autre et là c'est pour coché les sortit

      <dl class="dropdown multiple-choix select-loisir-sortir">
	  <dt class="hida1 icon-select">sortir</dt>
	  <dd class="mutliSelect1"><ol>
	  <li><input type="checkbox" id="cinema" name="cinema" value="cinéma" />cinéma</li>
	  <li><input type="checkbox" id="restaurant" name="restaurant" value="restaurant" />restaurant</li>
	  <li><input type="checkbox" id="soirees-entre-amis" name="soirees-entre-amis" value="soirées entre amis" />soirées entre amis</li>
	  <li><input type="checkbox" id="famille" name="famille" value="famille" />famille</li>
	  <li><input type="checkbox" id="bar-pub" name="bar-pub" value="bar/pub" />bar/pub</li>
	  <li><input type="checkbox" id="concert" name="concert" value="concert" />concert</li>
	  <li><input type="checkbox" id="opera-theatre" name="opera-theatre" value="opéra/théatre" />opéra/théatre</li>
	  <li><input type="checkbox" id="spectacle-de-danse" name="spectacle-de-danse" value="spectacle de danse" />spectacle de danse</li>
	  <li><input type="checkbox" id="lire" name="lire" value="lire" />lire</li>
	  <li><input type="checkbox" id="after-work" name="after-work" value="after work" />after work</li>
	  <li><input type="checkbox" id="autres" name="autres" value="autres" />autres</li>
	  </ol></dd></dl>
	  <span class="choix-membre"></span>



et l'erreur c'est

Error: Duplicate ID cinema.
From line 1083, column 8; to line 1083, column 73
i>↩	  <li><input type="checkbox" id="cinema" name="cinema" value="cinéma" />cinéma
Warning: The first occurrence of ID cinema was here.
From line 1045, column 8; to line 1045, column 73
l>↩	  <li><input type="checkbox" id="cinema" name="cinema" value="cinéma" />cinéma
Error: Duplicate ID restaurant.
From line 1089, column 8; to line 1089, column 85
i>↩	  <li><input type="checkbox" id="restaurant" name="restaurant" value="restaurant" />restau
Warning: The first occurrence of ID restaurant was here.
From line 1046, column 8; to line 1046, column 85
i>↩	  <li><input type="checkbox" id="restaurant" name="restaurant" value="restaurant" />restau


moi perso je veux bien suprimer le id et name mais on m'a dit qu'il faut le mettre id name

ces code là c 'est pour coché plusieurs option
merci
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 févr. 2017 à 13:32
Ton code n'est pas celui d'un SELECT
Par contre... tu dois avoir un JAVASCRIPT qui "transforme" ton code en liste déroulante....

Donc je répète ma question précédente... quel est le code EXACT (sous entendu... COMPLET ) ?

Utilises tu réellement les "id" dans ton code ou utilises tu uniquement les attributs "name" (dans le cas d'un SUBMIT d'un FORM par exemple ) ?

Sachant que oui.. un ID se doit d'être unique...
0
en faite j'ai mis ca pour jquery

// JavaScript Document

//Toggle de la liste
var obj, selectVal = {},index_parent, strings = {}, target;
$(".multiple-choix").on("click", ".hida1", function() {
    $(".mutliSelect1 ol").not($(".mutliSelect1 ol", $(this).parent())).slideUp('500');
    $(".mutliSelect1 ol", $(this).parent()).slideToggle('500');
    target = $(this).parent();
  })
  //Reporter valeur directement après on "click"
  .on("change", "input[type='checkbox']", function() {
    //index_parent = $(this).parents("dl").index(".multiple-choix");
    obj = $(this).parents('.multiple-choix').find(".hida1 span"); 			var iterator = parseInt($(this).parents("dl").index(".multiple-choix"));
   
     
    if(strings[iterator]==undefined)
			strings[iterator] = {};
    if(selectVal[iterator]==undefined)
    	selectVal[iterator] = "";
     
    $(this).each(function() {
     //pour chaque checkbox dont la valeur est true
      if ($(this).is(':checked')) {
 				strings[iterator][$(this).val()] = $(this).val();
      }else{
      	delete(strings[iterator][$(this).val()]);
      }
			
       if(selectVal[iterator]=="")
    		selectVal[iterator] = obj.text();
      
     	var default_text = selectVal[iterator];
      if(Object.keys(strings[iterator]).length < 1){
      	strings[iterator][default_text] = default_text;
      }else{
      	delete(strings[iterator][default_text]);
      }
      
      var result = joinObj(sortObj(strings[iterator]),", ");
      var optionnal_panel = target.find("p.choix-membre");
      var optionnal_panel2 = $("p.choix-membre[data-for-select=\"" + default_text + "\"");
      if(optionnal_panel.length){
      	obj.text(default_text);
        optionnal_panel.text(result);
     	}else if(optionnal_panel2.length){
      	obj.text(default_text);
        optionnal_panel2.text(result);
      }else
      	obj.text(result);
      /*console.log(" index_parent :" + index_parent + " nodeName :" + obj.get(0).nodeName + " selectVal :" + selectVal);*/
 $(this).parents('.multiple-choix').trigger("value_changed",[result]);
    });
 		
 		
  });
  
  
  $(".choix").each(function() {
  	var li = $(this).find("li");
    var name = $(this).data("name");
    li.each(function(){
    	$(this).css("cursor","pointer");
      $(this).prepend("<input type=\"checkbox\" name=\""+name+"\" value=\""+$(this).text()+"\" style=\"display:none;\" />");
    });
  });
  $(".choix").on("click", ".hida1", function() {

    $(".mutliSelect1 ol").not($(".mutliSelect1 ol", $(this).parent())).slideUp('500');
    $(".mutliSelect1 ol", $(this).parent()).slideToggle('500');
    target = $(this).parent();
  })

  $('.choix').on("click","li", function(){
  console.log("j");
  	  var name = $(this).parents('.choix').data("name");
      var val = $(this).text();
      var hida = $(this).parents('.choix').find(".hida1");
     	var checkbox = $(this).find("input[name=\""+name+"\"][value=\""+val+"\"][type=checkbox]");
      console.log(checkbox);
      hida.text(val);
      
      $(this).find("input[type=checkbox]").each(function(){
      	$(this).prop("checked",false);
      });
      
      checkbox.prop("checked",true);
      hida.trigger("click");
  });



$(".multiple-choix").on("value_changed",function(e,value){
	$(".choix-membre").text(value);
});




function joinObj(a, delemiter) {
  var out = []; 
  for(var key in a){
  	out.push(a[key]);
  }
  return out.join(delemiter);
}

function sortObj(obj) {
    "use strict";

    function Obj2Array(obj) {
        var newObj = [];
        for (var key in obj) {
            if (!obj.hasOwnProperty(key)) return;
            var value = [key, obj[key]];
            newObj.push(value);
        }
        return newObj;
    }

    var sortedArray = Obj2Array(obj).sort(function(a, b) {
        if (a[1] < b[1]) return -1;
        if (a[1] > b[1]) return 1;
        return 0;
    });

    function recreateSortedObject(targ) {
        var sortedObj = {};
        for (var i = 0; i < targ.length; i++) {
            sortedObj[targ[i][0]] = targ[i][1];
        }
        return sortedObj;
    }
    return recreateSortedObject(sortedArray);
}


à mon avis je peux suprimé id et voir name et je garde value

tu me diras si je ne me trompe pas ;)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 févr. 2017 à 18:05
Je pense qu'en effet .. avoir des ID et NAME ne me semble pas nécessaire dans ce code.
Tu n'as qu'à essayer et voir ce que ça donne...
0
je supprime c juste ca ma question si dans ce cas

merci d'avance
0
1bloke > romeo
2 févr. 2017 à 18:39
par contre c'est label qu'il faut utiliser pour un HTML correct.
0