Bonjour,
j ai un formulaire avec des input text et des menu deroulant select.
Pourtant j’aimerais qu’en fonction d’un choix d’un menu deroulant situé sur la meme page, cela puisse desactiver certains input (ou select).
Exemple:
menu deroulant avec 2 choix : ajout prix et ajout complet
des choix avec:
nom
prix
id
quand je choisis ajout prix : ca provoque desactivations (disabled en gros!) des champs nom et id, sinon ca ne desactive rien.
merci d’avance
<script type="text/javascript">
function activation( id ) {
document.getElementById( id ).disabled = false;
}
function deactivation( id ) {
document.getElementById( id ).disabled = true;
}
function onChangeSelect() {
if( document.getElementById( 'choixSelect' ).value == 'ajoutPrix' ) {
deactivation( 'nomInput' );
deactivation( 'idInput' );
} else {
activation( 'nomInput' );
activation( 'idInput' );
}
}
</script>
<form action="" method="POST">
<select name="choix" id="choixSelect" onchange="javascript:onChangeSelect();">
<option value="-1">Faite votre choix</option>
<option value="ajoutPrix">ajout prix</option>
<option value="ajoutComplet">ajout complet</option>
</select><br/>
<input type="text" name="prix" value="Champ PRIX" /><br/>
<input type="text" id="nomInput" name="nom" value="Champ NOM" /><br/>
<input type="text" id="idInput" name="id" value="Champ ID" /><br/>
</form>
Faut l’adapté à tout ton formulaire, il y aussi moyen de change le getElementById en getElementsByName, si tu veux pas donné des id à tes inputs.
<script type="text/javascript">
function activation( id ) {
document.getElementById( id ).disabled = false;
}
function deactivation( id ) {
document.getElementById( id ).disabled = true;
}
/*
* Fonction : onChangeSelectDisable
* Select = Objet qui correspond au Select
* valeur = Valeur pour la quelle il faut déactiver les champs
* listid = tableau des id à déactiver
*/
function onChangeSelectDisable( Select , valeur , listid ) {
if( Select.value == valeur ) {
for( var i = 0 ; i < listid.length ; i++ ) {
deactivation( listid[ i ] );
}
} else {
for( var i = 0 ; i < listid.length ; i++ ) {
activation( listid[ i ] );
}
}
}
</script>
<form action="" method="POST">
<select name="choix" onchange="javascript:onChangeSelectDisable( this , 'ajoutPrix' , [ 'nomInput' , 'idInput' ] );">
<option value="-1">Faite votre choix</option>
<option value="ajoutPrix">ajout prix</option>
<option value="ajoutComplet">ajout complet</option>
</select><br/>
<input type="text" name="prix" value="Champ PRIX" /><br/>
<input type="text" id="nomInput" name="nom" value="Champ NOM" /><br/>
<input type="text" id="idInput" name="id" value="Champ ID" /><br/>
</form>
Juste pour le plaisir, un truc qui s’adapte à tout les formulaires !
Edité le 21/12/2007 à 20:34
c’est nickel ca marche parfaitement, merci bien pyro