<select> qui affiche des input different suivant la selection

Version imprimable

Bonjour à tous,

désoler si je pose une question bete mais je connai tres peu le js.

voila le probleme, j'ai un formulaire avec un champs select et j'aimerai afficher des champs inupt suivant la sellection.

voici la partie de code en question:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class="form-row"> <div class="field-label"><label for="field10">Type du contrat</label>:</div> <div class="field-widget"> <select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat"> <option>Séléctionner un type...</option> <option>CDI</option> <option>CDD</option> <option>Préstataire</option> <option>Interimaire</option> </select> </div> </div> <div class="form-row"> <div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div> <div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div> </div> <div class="form-row"> <div class="field-label"><label for="field12">Société*</label>:</div> <div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div> </div>
il faudrai afficher pour:
cdi --> aucun des deux input
cdd --> le field11
prestataire et interimaire les deux input

quelle qu'un pour m'explique et m'aider ???

salut
sur ton select

Code:

onchange="toggleInput(this);"

Code:

1
2
3
4
5
6
7
8
function toggleInput(o)
{
  var choix = ... // récupère le choix
  document.getElementById('input1').style.display = (choix == 'toto' ? "block" : "none");
  document.getElementById('input2').style.display = (choix == 'titi' ? "block" : "none");
  document.getElementById('input3').style.display = (choix == 'tutu' ? "block" : "none");
  ...
}

par exemple

merci

merci pour ta reponse mais j'aurai encor besoin d'aide voici mes fichier:

fichier index:

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
 
<div class="form-row">
	<div class="field-label"><label for="field10">Type du contrat</label>:</div>
		<div class="field-widget">
			<select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat" onchange="toggleInput(this);">
				<option>Séléctionner un type...</option>
				<option>CDI</option>
				<option>CDD</option>
				<option>Préstataire</option>
				<option>Interimaire</option>
			</select>
		</div>
	</div>
<div id="CDD" style="display:none;">
	<div class="form-row">
		<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
		<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
	</div>
</div>
 <div id="autre" style="display:none;">
	<div class="form-row">
	        <div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
		<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
	</div>
        <div class="form-row" style="display:none;">
                <div class="field-label"><label for="field12">Société*</label>:</div>
	        <div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div>
         </div>
</div>

le fichier js.js

Code:

1
2
3
4
5
6
7
8
 
function toggleInput(o)
{
  var choix =
  document.getElementById('CDD').style.display = (choix == 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Préstataire' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Interimaire' ? "block" : "none");
}

sa ne marche pas une idée du probleme ?

02/10/2008, 16h43
bigboomshakala

oh oui je vois bien quelques petites choses :D
déjà tu ne donnes pas de valeur à choix dans ta fonction
ensuite pour l'input "autre" tu fais 2 affectations au lieu d'une (la 1ere est annulée par la 2ème)
les <option> n'ont pas de value (c'est la value que tu dois récupérer et mettre dans ton choix), mais peut-être qu'en l'absence de value explicite la value équivaut au libellé ?

Bonjour,
c'st la value qui compte pour les select :

Code:

onchange="toggleInput(this.value);"

et
Code:

1 2 3 4 5 <option value="-1">Séléctionner un type...</option> <option value="CDI">CDI</option> <option value="CDD">CDD</option> <option value="Préstataire">Préstataire</option> <option value="Interimaire">Interimaire</option>
A+

sa marche toujour pas:

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
<div class="form-row">
	<div class="field-label"><label for="field10">Type du contrat</label>:</div>
	<div class="field-widget">
		<select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat" onchange="toggleInput(this.value);">
			<option value="-1">Séléctionner un type...</option>
			<option value="CDI">CDI</option>
			<option value="CDD">CDD</option>
			<option value="Préstataire">Préstataire</option>
			<option value="Interimaire">Interimaire</option>
		</select>
	</div>
</div>
	<div id="CDD" style="display:none;">
		<div class="form-row">
			<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
			<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
		</div>
	</div>
	<div id="autre" style="display:none;">
		<div class="form-row">
			<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
			<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
		</div>
	<div class="form-row">
		<div class="field-label"><label for="field12">Société*</label>:</div>
		<div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div>
	</div>
</div>

Code:

1
2
3
4
5
6
7
function toggleInput(o)
{
  var choix = CDD, Préstataire, Interimaire
  document.getElementById('CDD').style.display = (choix == 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Préstataire' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Interimaire' ? "block" : "none");
}

une idée ?

Citation:

Envoyé par cirvent

une idée ?

oui...

Code:

1
2
3
4
5
function toggleInput(o)
{
  document.getElementById('CDD').style.display = (o== 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (o == 'Préstataire' || o == 'Interimaire' ? "block" : "none");
}

02/10/2008, 17h01
E.Bzz

Heu ... c'est quoi ça

Code:

var choix = CDD, Préstataire, Interimaire

:?

Pas du JS, en tous cas ...

EDIT : grilled :mrgreen:

A+
02/10/2008, 17h02
bigboomshakala

sinon pour info
Prestataire
Intérimaire
02/10/2008, 18h47
cirvent

heu rectification a priori sa fonctionne bien !!
02/10/2008, 18h52
cirvent

nikel les gas je vous remercie énormément !