Une question input avec id

romeo -  
 1bloke -
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

  1. Pitet Messages postés 2845 Statut Membre 530
     
    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
  2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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
  3. romeo
     
    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
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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
  4. romeo
     
    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
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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
    2. romeo
       
      je supprime c juste ca ma question si dans ce cas

      merci d'avance
      0
      1. 1bloke > romeo
         
        par contre c'est label qu'il faut utiliser pour un HTML correct.
        0