Récuperer la valeur d'une option de select [Résolu]

Signaler
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014
-
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014
-
Bonjour,
je veux récuperer la valeur choisis du select pour aditer des champs voila mon code:
<select name="nb" size="1" oninput="remplir();" id='select'  style="position:absolute;left:293px;top:95px;width:168px;height:22px;z-index:26;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>


function remplir()
{   
    var nb = document.getElementById('select').value ;
	var valeur = nb.options[select.selectedIndex].value;

    var i;
    
    for (i=2;i<12;i++)
	{
    document.getElementById(i).disabled =true;
    }

    for(i=1; i<=(valeur*2)+1;i++)
    {
         document.getElementById(i).disabled =false;
    }
    
    nb = document.getElementById('select').value ;

}


pouvez-vous m'aider svp?merci d'avance

10 réponses

Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
onjour.
Je ne comprends pas ce que tu cherches à faire. ..
Surtout a quoi correspond le i dans ta ligne
document.getElementById(i)

Tu n'as aucun élément dont l'Id serait un chiffre...
Ou alors il nous manque du code...
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

Bonjour je suis désolé pour le retard
oui il vous manque du code.j'ai 10 input qui deviennent éditable que lorsque j'entre un nb de 1 à 5.
merci
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
et aussi nb sans value

var nb = document.getElementById('select'); 

Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

voila le reste du code:
<span style="color:#000000;font-family:Arial;font-size:13px;">Module :</span></div>
<input type="text" id="Editbox1" style="position:absolute;left:77px;top:21px;width:166px;height:18px;line-height:18px;z-index:1;" name="modu" value="">
<div id="wb_Text2" style="position:absolute;left:291px;top:21px;width:45px;height:16px;z-index:2;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<input type="text" id="Editbox2" style="position:absolute;left:339px;top:21px;width:166px;height:18px;line-height:18px;z-index:3;" name="Seuil" value="">
<div  style="position:absolute;left:150px;top:62px;width:45px;height:16px;z-index:2;">
<span style="color:#000000;font-family:Arial;font-size:13px;left:220px;">Departement:</span></div>
<input type="text"  style="position:absolute;left:240px;top:62px;width:166px;height:18px;line-height:18px;z-index:3;" name="br" value="">
<div id="wb_Text3" style="position:absolute;left:127px;top:109px;width:162px;height:16px;z-index:4;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Nombre de sous-modules :</span></div>
<hr id="Line1" style="margin:0;padding:0;position:absolute;left:126px;top:98px;width:332px;height:1px;z-index:5;">
<input type="text"  disabled="true" style="position:absolute;left:400px;top:241px;width:166px;height:18px;line-height:18px;z-index:6;" name="S4" id='9' value="">
<div id="wb_Text11" style="position:absolute;left:346px;top:244px;width:50px;height:16px;z-index:7;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<input type="text"  disabled="true" style="position:absolute;left:400px;top:272px;width:166px;height:18px;line-height:18px;z-index:8;" name="S5" id='11' value="">
<div id="wb_Text15" style="position:absolute;left:346px;top:275px;width:50px;height:16px;z-index:9;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<div id="wb_Text10" style="position:absolute;left:346px;top:213px;width:50px;height:16px;z-index:10;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<input type="text"  disabled="true" style="position:absolute;left:400px;top:210px;width:166px;height:18px;line-height:18px;z-index:11;" name="S3" id='7' value="">
<div id="wb_Text7" style="position:absolute;left:346px;top:181px;width:50px;height:16px;z-index:12;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<input type="text" disabled="true"  style="position:absolute;left:400px;top:178px;width:166px;height:18px;line-height:18px;z-index:13;" name="S2" id='5' value="">
<div id="wb_Text6" style="position:absolute;left:346px;top:148px;width:50px;height:16px;z-index:14;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Seuil :</span></div>
<input type="text" disabled="true"  style="position:absolute;left:400px;top:145px;width:166px;height:18px;line-height:18px;z-index:15;" name="S1" id='3' value="">
<input type="text"  style="position:absolute;left:147px;top:145px;width:166px;height:18px;line-height:18px;z-index:16;" name="Smod1" id='2' disabled="true" value="">
<input type="text"  style="position:absolute;left:147px;top:179px;width:166px;height:18px;line-height:18px;z-index:17;" name="Smod2" id='4' disabled="true" value="">
<input type="text" disabled="true"  style="position:absolute;left:147px;top:210px;width:166px;height:18px;line-height:18px;z-index:18;" name="Smod3" id='6' value="">
<input type="text" disabled="true"  style="position:absolute;left:147px;top:242px;width:166px;height:18px;line-height:18px;z-index:19;" name="Smod4" id='8' value="">
<input type="text"  disabled="true"  style="position:absolute;left:147px;top:273px;width:166px;height:18px;line-height:18px;z-index:20;" name="Smod5" id='10' value="">
<div id="wb_Text4" style="position:absolute;left:40px;top:148px;width:103px;height:16px;z-index:21;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Sous-module 1 :</span></div>
<div id="wb_Text5" style="position:absolute;left:40px;top:182px;width:103px;height:16px;z-index:22;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Sous-module 2 :</span></div>
<div id="wb_Text8" style="position:absolute;left:40px;top:213px;width:103px;height:16px;z-index:23;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Sous-module 3 :</span></div>
<div id="wb_Text9" style="position:absolute;left:40px;top:245px;width:103px;height:16px;z-index:24;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Sous-module 4 :</span></div>
<div id="wb_Text13" style="position:absolute;left:40px;top:276px;width:103px;height:16px;z-index:25;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Sous-module 5 :</span></div>
<input name="nb" size="1" oninput="remplir();" id='1'  type='text' style= "position:absolute;left:293px;top:109px;width:168px;height:22px;z-index:26;">
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
il reste des zone d'ombres qui doit etre dissable ? pour les elements qui doivent il faudrait les renomer dans le genre elem3 elem4 elem5...etc et boucler de cette facon


 for (i=2;i<12;i++)
	{
    document.getElementById('elem'+i).disabled =true;
    }


et aussi pour plus de lisibilité dans le html et pour eviter les répétitions pour les style crée une feuille de style et utilise des class
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

désolé mais j'ai pas bien compris cette phrase "il reste des zone d'ombres qui doit etre dissable ?" tous les zones sont disable dans cette page car j'ai mis disabled=true dans chaque zone
merci
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105

for (i=2;i<12;i++)
{
document.getElementById(i).disabled =true;
}


document.getElementById(i) doit correspondre a un element au vue du code je pense aux input et ecrit de la sorte cela voudrait dire que les elements se nomes 3 4 5 ...etc

cours Forest cours !
Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
Il y a un autre point qui me "choque".
Pour le SELECT ... il te faut utiliser onchange et non oninput.
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
ca m'a choqué aussi et j'ai fait une recherche sur google pour etre sur et surpriseil existe vraiment mais je pense qu'il est rarement utilisé car il fonctionnement pas avec ie 8 et <
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

nnn avant d'ajouter le select et les options tous ca marche avec oninput et jusqu'au mnt il ca marche.j'ai changer oninput avec onchange mais tjrs pas de changement
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

juste je veux la changer pour limiter les choix et pour ne pas se charger de faire des tests pour interdire l'utilisateur à inserer un nb sup à 5
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
mais c'est qu'elles elements que tu veut changer sa ne se fera pas par magie
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

je veux que les zones de sous module et seuil deviennent editables selon le nb que je saisie
Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
Mounana.. regarde l'exemple que je viens de te donner.
Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
Voici un petit exemple:

<select id="choixinput" onchange="initSaisie(this.value);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br><br>
   <br><input name="inputSaisie[]" type="text" id="1" disabled >
   <br><input name="inputSaisie[]" type="text" id="2" disabled >
   <br><input name="inputSaisie[]" type="text" id="3" disabled >
   <br><input name="inputSaisie[]" type="text" id="4" disabled >
   <br><input name="inputSaisie[]" type="text" id="5" disabled >
       
 <script type="text/javascript">
  function initSaisie(elemValue){
    var allInp = document.getElementsByName("inputSaisie[]");
     //alert (allInp.length);
    for(i=0;i < allInp.length;i++){
        allInp[i].disabled=true;
     }
     document.getElementById(elemValue).disabled=false;
    
}
       </script>

Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

ouiii merciiiii bcppppp
Bonjour jordane45 je viens de voir le code que t'as proposé, peux tu m'expliquer pourquoi t'as utilisé la taille "allInp.length" ?
Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
Length me donne la taille du tableau allInp.
Allinp :tableau (array) qui contient les input ayant pour nom inputSaise []
aaah ouii je vois,
Mais cette fonction ne fait pas la même chose que la fonction de mounana199 ! et je ne sais pas pourquoi !!
Messages postés
29806
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2020
338
En quoi ne fait elle pas la même chose ?

Sachant que je ne lui ai pas donné le code exact à ses attentes mais un exemple de comment procéder.

Maintenant je t'invite a ouvrir ta propre discussion plutot que d'echanger dans une discussion existante.
je pense qu'elle veut mettre x champs editables selon le nombre saisie dans le champs 'Nombre de sous-modules', par ex. si on saisie 3 alors les 3 premiers champs deviennent editables, mais avec la fonction que vous avez écris si on entre 3 alors seulement le 3éme champs devient editable, enfin je pense!
je viens pour aider puisqu'elle n'a pas encore marquer le Résolu.
Voila le code que je propose http://jsfiddle.net/s4eka/1/ !
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
il faut d'abord recuperer la valeur du select et la transformé en valeur numérique avec parseInt en suite on ajoute une condition

<select id="choixinput" onchange="initSaisie(this.value);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br><br>
   <br><input name="inputSaisie[]" type="text" id="1" disabled >
   <br><input name="inputSaisie[]" type="text" id="2" disabled >
   <br><input name="inputSaisie[]" type="text" id="3" disabled >
   <br><input name="inputSaisie[]" type="text" id="4" disabled >
   <br><input name="inputSaisie[]" type="text" id="5" disabled >
       
 <script type="text/javascript">

   function initSaisie(elemValue){

 var valeur = parseInt(elemValue);

 var allInp = document.getElementsByName("inputSaisie[]");

 for(var i=0;i < allInp.length;i++){

  if(i<valeur){
   
   allInp[i].disabled=false
  }
  
  else{
   allInp[i].disabled=true;
  }
 }
}
</script> 


cours Forest cours !
Messages postés
99
Date d'inscription
jeudi 24 avril 2014
Statut
Membre
Dernière intervention
7 juin 2014

merci kazma et merci à tous mon prob est resolu merci ouma pour ce code c'est ce que je cherche merciii :) :)