Récupérer valeur formulaire

Version imprimable

Bonjour,

voilà je suis en train de réaliser un formulaire pour la création d'une page par le biais d'un formulaire. J'aimerai par le biais d'un champ "select" sélectionner entre un chercheur et un ingénieur et une fois le champ sélectionner récupérer sa valeur et définir soit publications soit compétences selon le type de personne. Le problème est que je ne sais pas trop comment... J'ai essayer avec ça :
Code:

1 2 var selectElmt = document.getElementById("ComboPays"); var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;
mais ça ne fonctionne pas très bien
Code:

1 2 3 4 5 6 7 8 9 <label for="selection">Type </label>: <select name="selection" id="selection"> <option value="ingenieur">Ingénieur</option> <option value="chercheur">Chercheur</option> </select> <div id="dynamicInput"> Publication 1 : <input type="text" name="myInputs[]"> <input type="button" value="+" onClick="addInput('dynamicInput');"> </div>
javascript :
Code:

1 2 3 4 5 6 7 8 var counter = 1; function addInput(dynamicInput){ var newdiv = document.createElement('div'); newdiv.innerHTML = "Publication " + (counter + 1) + " : <input type='text' name='myInputs[]'><br/>"; document.getElementById(dynamicInput).appendChild(newdiv); counter++; }
merci d'avance !

Bonjour,

En utilisant l'événement onChange sur la balise select ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
    <label for="selection">Type </label>:
    <select name="selection" id="selection">
        <option value="">----------</option>
        <option value="ingenieur">Ingénieur</option>
        <option value="chercheur">Chercheur</option>
    </select>
    <hr>
    <div id="details">
 
    </div>
    <script>
    (function () {
        var sel = document.getElementById('selection');
 
        sel.addEventListener('change', function () {
            var profil = sel.value;
            document.getElementById('details').innerHTML = "Vous avez choisi un : " + profil;
        });
    }())
    </script>
 </body>
 </html>

micetf

18/02/2016, 12h43
Invité

Merci à toi je vais regarder ça !

En faite, j'ai une div qui me permet d'ajouter des champs de manière dynamique selon l'utilisateur. J'aimerai que l'utilisateur choisisse par le biais du select Ingénieur ou Chercheur. Si celui ci met sur chercheur je peux créer de façon dynamique des champs avec marqué "Publications" et si celui-ci choisi Ingénieur qu'il puisse créer des champs mais avec marqué compétences.

Je te tiens au courant ;)
18/02/2016, 12h46
SpaceFrog

pourquoi passer par le selectedIndex ???
le value du select t'est retourné direct par .value du select ...
18/02/2016, 14h02
Invité

Parce que c'est une liste non ?
18/02/2016, 14h28
SpaceFrog

non...

le .value suffit sur le select ...

https://fiddle.jshell.net/quegp5ed/

salut !

J'ai essayé de cette manière mais ça ne fonctionne pas a moins que j'ai fais quelque chose de travers:

Code:

1
2
3
4
5
6
7
8
function(){
 
$('#selection').on('change', function(){
 
 var t = document.getElementById('selection').value;
 alert(t);
})
}

Du coup j'ai essayé comme ceci (avec selectindex :/) et j'arrive a récupérer les valeurs. Mais une fois que j'insère le code pour créer des champs dynamique impossible de les créer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function myFunction() {
    var x = document.getElementById("selection");
    var i = x.selectedIndex;
    var t = x.options[i].text;
 
    if( t == "ingenieur"){
	    alert("ingenieur");
    }else {
	    alert("chercheur");
 
       // var counter =1;
        //function addInput(dynamicInput){
 
        //var newdiv = document.createElement('div');
        //newdiv.innerHTML = "Publication " + (counter + 1) + " : <input type='text' name='myInputs[]'><br/>";
        //document.getElementById(dynamicInput).appendChild(newdiv);
       // counter++;
 
 
}
    }
}

tu as un souc d'atribution de l'event...
tu ne peux attribier le pnchange que si l'objet existe ...
=> il faut passer par le ready
Code:

1 2 3 4 5 6 7 $( function(){ // <= equilavent de document ready $('#selection').on('change', function(){ var t = document.getElementById('selection').value; alert(t); }) })
mais comme tu utilises JQuery autant utiliser le val() ...
Code:

1 2 3 4 5 6 7 $(function(){ $('#selection').on('change', function(){ var t = $(this).val(); alert(t); }) })

Voila j'ai enfin réussi ! merci à toi !

une petite question, est-ce que je pourrai l'optimiser de manière a ce que je garde qu'une variable counter voir qu'une fonction ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function check(elem){
	if (elem.value == 'Ingénieur') {
 
        document.getElementById("dynamicInput1").style.display = 'block';
        document.getElementById("dynamicInput2").style.display = 'none';
    } else {
 
        document.getElementById("dynamicInput1").style.display = 'none';
        document.getElementById("dynamicInput2").style.display = 'block';
 
    }
 
}
 
	  var counter1 = 1;
 
function addInput1(dynamicInput1){
 
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Compétence " + (counter1 + 1) + " : <input type='text' name='myInputs[]' class='field'>";
          document.getElementById(dynamicInput1).appendChild(newdiv);
          counter1++;
 
}
  var counter2 = 1;
function addInput2(dynamicInput2){
 
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Publication " + (counter2 + 1) + " : <input type='text' name='myInputs[]' class='field'>";
          document.getElementById(dynamicInput2).appendChild(newdiv);
          counter2++;
 
}
 
<select id="mySelect" onChange="check(this);">
    <option>-----</option>
    <option>Chercheur</option>
    <option>Ingénieur</option>
</select>
<div id="dynamicInput1" style="display:none;">
Compétences 1 : <input type="text" name="myInputs[]">   <input type="button" value="+" onClick="addInput1('dynamicInput1');">
</div>
<div id="dynamicInput2" style="display:none;">
Publication 1 : <input type="text" name="myInputs[]">   <input type="button" value="+" onClick="addInput2('dynamicInput2');">
</div>

merci :)

Bonjour,
tu peux toujours factoriser, par exemple
Code:

1 2 3 4 5 function check(elem){ var flag = elem.value == 'Ingénieur'; document.getElementById("dynamicInput1").style.display = flag ? 'block' : 'none'; document.getElementById("dynamicInput2").style.display = !flag ? 'block' : 'none'; }
mais si tu fais cohabiter javascript vanilla et jQuery autant passer par jQuey !

20/02/2016, 19h50
Invité

D'accord merci à vous ! ;)