un input en disabled, par rapport à une option.

Le problème exposé dans ce sujet a été résolu.

Bonjour, Je cherche à ce que mon input devienne disabled pour tout autre résultat que "autre" dans mes options. Je suis pas "trés bon" (je débute quoi) en javascript mais j'ai essayé de retourner le truc dans tout les sens…

Le code javascript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    window.onload = function() 
                    { 
                        initEvent(); 
                        active_autre(); 
                    }   

function active_autre()
    {
        var expediteur = document.getElementById('expediteur');
        var autre = expediteur.options[expediteur.selectedIndex].innerHTML;

        expediteur.onchange = function()
        {
            if ((autre == 'autre') == true)
            {
                document.getElementById('autre').disabled = false;
            }
            else
            {
                document.getElementById('autre').disabled = true;
            }
        }
    }

Le code html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<p>
    Exp&eacute;diteur: &agrave; remplir:<br/>            
    <select id="expediteur">
        <option value="Alexandre F. et Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af et vb');">Alexandre F. et Valerie B.
        <option value="Alexandre F." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af');">Alexandre F.
        <option value="Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de vb');">Valerie B.
        <option selected id="option_autre" value="" onclick="javascript:AFFICHAGE_AUTO('');">Autre
    </select>
    <input id="autre" style="width:200px" value="" disabled />
    <br/>
    <textarea name="expediteur" id="remplissage_auto" style="width:100%;height:150px;" disabled></textarea>
</p>
<label for="adc">Activation du champ</label> <input type="checkbox" id="adc" name="adc" />
+0 -0

Euuh en face de toi, c'est pas un professionnel que tu as ^^. Les écouteurs et les scopes ça me parlent pas du tout. J'essaie d'apprendre le javascript à ma maniere (sur le tas) en parcourant divers cours, tuto et forum. Sinon:

1
var autre = expediteur.options[expediteur.selectedIndex].innerHTML;

Est ce que ceci était la bonne formulation pour récupérérer la valeur de l'option choisi? et est ce que:

1
if ((autre == 'autre') == true)

est une formulation correcte? (perso je trouve qu'elle pue… mais je sais pas quoi faire)

+0 -0

if ((autre == 'autre') == true)

est une formulation correcte? (perso je trouve qu'elle pue… mais je sais pas quoi faire)

Tout simplement :

1
if (autre == 'autre')

Puisque ce sera évalué à true ou false. C'est le premier langage que tu apprends ? Car c'est relativement similaire dans les autres :)

+0 -0

Non le 3ème ^^ (je connais bien l'html, css et php) mais comme le javascript, tout appris sur le tas ^^. C'est juste que le javascript c'est plus chiant à apprendre j'ai l'impression. Et que j'ai tellement chercher à pondre c'est quelques lignes de code que j'en suis venu à faire n'importe quoi.

Sinon:

1
var autre = expediteur.options[expediteur.selectedIndex].innerHTML;

Formulation correct aussi? pour récuperer la valeur de l'option.

+0 -0 
1
var autre = expediteur.options[expediteur.selectedIndex].innerHTML;

Formulation correct aussi? pour récuperer la valeur de l'option.

alex4gous

C'est une façon de faire, qui a l'avantage c'être compatible avec les vieux navigateurs, mais qui ne récupère que le texte affiché, pas l'attribue value. Soit expediteur.options[expediteur.selectedIndex].value.

Sinon une méthode plus simple est de faire directement expediteur.value (mais peut causer des problèmes sur quelques navigateurs un peu anciens).

En gros l'écouteur dont je parlais c'est ta méthode onchange qui est exécutée quand ton select change de valeur. Le seule problème c'est que la variable autre que tu utilises dans cette méthode est définie en-dehors et est donc fixe à chaque exécution de la méthode. Il suffit de déplacer cette ligne pour que ça aille déjà mieux.

Ensuite tu pourras optimiser un peu plus le code… ;)

Soit dit en passant, HTML et CSS sont des langages de description, pas de programmation. Ils n'ont pas de logique algorithmique et ne servent donc pas à grand chose ici (même s'ils ont tout leur intérêt dans d'autres domaines). ;)

+0 -0

J'ai pas trop compris en quoi la variable autre est défini en dehors :/

Cependant, j'ai pu pondre ça:

1
2
3
4
5
6
7
<select id="expediteur"  onchange="active_autre();">
        <option value="Alexandre F. et Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af et vb');">Alexandre F. et Valerie B.
        <option value="Alexandre F." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af');">Alexandre F.
        <option value="Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de vb');">Valerie B.
        <option selected id="option_autre" value="" onclick="AFFICHAGE_AUTO('');">Autre
    </select>
    <input id="autre" style="width:200px" value="" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function active_autre()
    {
        var autre = document.getElementById('autre');
        var expediteur = document.getElementById('expediteur');

        if (expediteur.value == '')
        {
            autre.disabled = false;
        }
        else
        {
            autre.disabled = true;
        }
    }

Et ça fonctionne :) Afin d' "optimiser" j'ai viré le window.onload et placé simplement le onchange dans select… J'ai corrigé un petit truc qui faisait que la valeur autre == était vide ^^ (ouais gros fail). Menfin, merci :)

+0 -0

Afin d' "optimiser" j'ai viré le window.onload et placé simplement le onchange dans select…

alex4gous

Ouais, sauf qu'en réalité ça fait tout l'inverse.

En général on charge le JS en fin de document et on évite, tout comme pour le CSS, d'en mettre dans le HTML : on fait ça aux endroits appropriés.

Sinon plutôt que d'utiliser window.onload = listener il y a document.addEventListener('DOMContentLoaded', listener, false) qui permet de gagner un peu de temps (le DOM étant chargé avant l'ensemble de la fenêtre).

Et si tu veux vraiment optimiser, tu peux déclarer tes deux variables en dehors de la fonction : ça évitera de parcourir le DOM à chaque fois.

+0 -0

Une chose dans ce genre?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    var autre = document.getElementById('autre');
    var expediteur = document.getElementById('expediteur');
    document.addEventListener('DOMContentLoaded', active_autre, false);

    function active_autre()
    {   
        if (expediteur.value == '')
        {
            autre.disabled = false;
        }
        else
        {
            autre.disabled = true;
        }
    }

1
2
3
4
5
6
7
    <select id="expediteur">
        <option value="Alexandre F. et Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af et vb');">Alexandre F. et Valerie B.
        <option value="Alexandre F." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af');">Alexandre F.
        <option value="Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de vb');">Valerie B.
        <option selected id="option_autre" value="" onclick="AFFICHAGE_AUTO('');">Autre
    </select>
    <input id="autre" style="width:200px" value="" />

Parce qu'actuellement ça fonctionne pas du tout.

+0 -0 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    var autre = document.getElementById('autre');
    var expediteur = document.getElementById('expediteur');

    document.addEventListener('DOMContentLoaded', function () {
    expediteur.addEventListener('change', active_autre, false);
    active_autre();
}, false);

    function active_autre()
    {   
        if (expediteur.value == '')
        {
            autre.disabled = false;
        }
        else
        {
            autre.disabled = true;
        }
    }

1
2
3
4
5
6
7
    <select id="expediteur">
        <option value="Alexandre F. et Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af et vb');">Alexandre F. et Valerie B.
        <option value="Alexandre F." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de af');">Alexandre F.
        <option value="Valerie B." onclick="javascript:AFFICHAGE_AUTO('remplissage auto de vb');">Valerie B.
        <option selected id="option_autre" value="" onclick="AFFICHAGE_AUTO('');">Autre
    </select>
    <input id="autre" style="width:200px" value="" />
+0 -0 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function active_autre()
{   
    if (expediteur.value == '') {
        autre.disabled = false;
    }
    else {
        autre.disabled = true;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var autre = document.getElementById('autre');
    var expediteur = document.getElementById('expediteur');

    active_autre();
    expediteur.addEventListener('change', active_autre, false);
}, false);

À mettre dans un fichier .js, de préférence chargé en fin de page (juste avant </body>) ou avec un attribut async.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte