Récupérer valeur formulaire

Invité · 17/02/2016, 17h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var selectElmt = document.getElementById("ComboPays");
var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;

mais ça ne fonctionne pas très bien

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**micetf** · 17/02/2016, 18h09

Bonjour,

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 18/02/2016, 12h43

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

**SpaceFrog** · 18/02/2016, 12h46

pourquoi passer par le selectedIndex ???
le value du select t'est retourné direct par .value du select ...

Invité · 18/02/2016, 14h02

Parce que c'est une liste non ?

**SpaceFrog** · 18/02/2016, 14h28

non...

le .value suffit sur le select ...

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

Invité · 19/02/2016, 14h09

salut !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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++;
 
 
}
    }
}

**SpaceFrog** · 19/02/2016, 14h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 20/02/2016, 11h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 20/02/2016, 14h33

Bonjour,
tu peux toujours factoriser, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

Invité · 20/02/2016, 19h50

D'accord merci à vous !

Récupérer valeur formulaire

JavaScript

Discussions similaires

Partager

Partager