Sujet Précédent Sujet Suivant

Mettre un input griser si le select est selectionner

Résolu/Fermé
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 - Modifié le 18 nov. 2020 à 23:02
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 - 19 nov. 2020 à 19:17
Bonjours, j'aimerai en gros faire un script qui va faire que quand le select à la valeur par default un deuxieme input et disponible pour écrire , mais si l'utilisateur utilise le selecte , le deuxième input devient grisé (disabled).

Sauf que je suis nul en Js et je ne voit pas du tout comment faire :
Pour me faire comprendre je vais vous l'illustrer avec les images suivante :

Cas 1 : Quand j'arrive sur le form et que le selecte à la value de base.



Cas 2 : Quand l'utilisateur sélectionne un article (ici kinder) bah genre le deuxième onglets et disabled




Mon code html sans occupe modification : 

<div class="invoice-item d-flex border rounded mb-1">
  <div class="invoice-item-filed row pt-1 px-1">
      <div class="col-12 col-md-4 form-group">
        <select name="article" id="article" class="form-control invoice-item-select">
          <option value="Pas d'article">Selectionner un article</option>
          <?php foreach($article as $articlee): ?>
          <option value="<?= $articlee['article'] ?>"><?= $articlee['article'] ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="col-md-3 col-12 form-group">
        <input name="cout" id="cout" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
      </div>
      <div class="col-md-3 col-12 form-group">
        <input name="quantite" id="quantite" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
      </div>
      <div class="col-md-2 col-12 form-group">
        <strong id="demo" class="text-primary align-middle">00.00 €</strong>
      </div>
      <div class="col-md-4 col-12 form-group">
        <label for="article">Article :</label>
        <input name="article" id="article" type="text" class="form-control invoice-item-desc" placeholder="Nom de l'article">
      </div>
      <div class="col-md-3 col-12 form-group">
        <label for="ref">REF :</label>
        <input name="referencearticle" id="referencearticle" type="text" class="form-control invoice-item-desc" placeholder="Réference">
      </div>
  </div>
  <div class="invoice-icon d-flex flex-column justify-content-between border-left p-25">
    <div class="dropdown">
      <i class="bx bx-cog cursor-pointer dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button"></i>
      <div class="dropdown-menu p-1">
        <div class="row">
          <div class="col-12 form-group">
            <label for="discount">Remise(%)</label>
            <input name="remise" id="remise" value="0" type="number" class="form-control" id="discount" placeholder="remise" maxlength="3" min="0" max="100">
          </div>
           <div class="col-12 form-group">
            <label for="discount">Tva(%)</label>
            <input name="tva" id="tva" value="0" type="number" class="form-control" id="discount" placeholder="0" maxlength="3" min="0" max="100">
          </div>
        </div>
        <hr>
      </div>
    </div>
  </div>
</div>


Ca doit etre quelque chose de simple mais j'ai cherche pendans 2 heures et je trouve plein de code un peu complexe a comprend pour mon niveau.

Quelqun pourra m'orienter vers un script en le décrivant si possible <3

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
Modifié le 18 nov. 2020 à 22:48
Bonsoir,



l'utilisateur utilise le select

Donc ça déclenche l'event ONCHANGE
https://www.w3schools.com/jsref/event_onchange.asp


le deuxième input devient grisé

Pour "cibler" un élement html, tu peux utiliser son id
https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Et pour le déséctiver, il faut "jouer" avec son attribut disabled
https://www.w3schools.com/tags/att_input_disabled.asp 
 document.getElementById("id_de_ton_imput").disabled = true;



Voila, tu n'as plus qu'à assembler tout ça ( 3 linges de codes...) et le tour est joué.
Un petit "if" pour pouvoir réactiver l'input si tu remet le select à vide et ça sera parfait.
https://www.w3schools.com/js/js_if_else.asp

1
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 3
19 nov. 2020 à 12:58
Bonjours , J'ai essayer mais ca ne marche pas j'ai du faire une erreur mais je ne voit pas où :

Html : 


                                                            <div class="invoice-item-filed row pt-1 px-1">
                                                                <div class="col-12 col-md-4 form-group">
                                                                    <select name="article" id="article" class="form-control invoice-item-select" onchange="disabled()">
                                                                        <option value="Pas d'article">Selectionner un article</option>
                                                                        <?php foreach($article as $articlee): ?>
                                                                        <option value="<?= $articlee['article'] ?>"><?= $articlee['article'] ?></option>
                                                                        <?php endforeach; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="cout" id="cout" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="quantite" id="quantite" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-2 col-12 form-group">
                                                                          <strong id="demo" class="text-primary align-middle">00.00 €</strong>
                                                                </div>
                                                                <div class="col-md-4 col-12 form-group">
                                                                    <label for="article">Article :</label>
                                                                    <input name="article" id="newarticle" type="text" class="form-control invoice-item-desc" placeholder="Nom de l'article">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <label for="ref">REF :</label>
                                                                    <input name="referencearticle" id="referencearticle" type="text" class="form-control invoice-item-desc" placeholder="Réference">
                                                                </div>
                                                            </div>



JS : 


function disabled(){

    if (document.getElementById("article").value == "Pas d'article") {

        document.getElementById("newarticle").disabled = false;

    }else{
        document.getElementById("newarticle").disabled = true;
    }
    
}
0
jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720 > ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022
19 nov. 2020 à 14:48
Où as tu placé ton code javascript ?
As tu regardé dans la console javascript de ton navigateur si il y avait des messages, des erreurs ?
Peux tu nous montrer le code "généré" de ta page ( celui que tu peux voir lorsque tu fais, dans ton navogateur, CTRL+u sur la page lorsqu'elle est affichée )
0
Réponse 2 / 3
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 3
19 nov. 2020 à 15:58
Effectivement il y a une erreur qui est signaler dans le navigateur.



ma page js -> myFunction_facture.js 


function disabled(){

    if (document.getElementById("article").value == "Selectionner un article") {

        document.getElementById("newarticle").disabled = false;

    }else{
        document.getElementById("newarticle").disabled = true;
    }
    
}


Un partie de l'html avec le ctrl-u (Il y a beaucoup de ligne) 


<div data-repeater-list="group-a">
                                                    <div data-repeater-item>
                                                        <div class="row mb-50">
                                                            <div class="col-3 col-md-4 invoice-item-title">Article</div>
                                                            <div class="col-3 invoice-item-title">Prix U</div>
                                                            <div class="col-3 invoice-item-title">Quantite</div>
                                                            <div class="col-3 col-md-2 invoice-item-title">Prix HT</div>
                                                        </div>
                                                        <div class="invoice-item d-flex border rounded mb-1">
                                                            <div class="invoice-item-filed row pt-1 px-1">
                                                                <div class="col-12 col-md-4 form-group">
                                                                    <select id="article" class="form-control invoice-item-select" onchange="disabled()">
                                                                        <option value="Pas d'article">Selectionner un article</option>
                                                                                                                                                <option value="Kinder">Kinder</option>
                                                                                                                                                <option value="Coca">Coca</option>
                                                                                                                                            </select>
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="cout" id="cout" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="quantite" id="quantite" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-2 col-12 form-group">
                                                                          <strong id="demo" class="text-primary align-middle">00.00 €</strong>
                                                                </div>
                                                                <div class="col-md-4 col-12 form-group">
                                                                    <label for="article">Article :</label>
                                                                    <input name="article" id="newarticle" type="text" class="form-control invoice-item-desc" placeholder="Nom de l'article">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <label for="ref">REF :</label>
                                                                    <input name="referencearticle" id="referencearticle" type="text" class="form-control invoice-item-desc" placeholder="Réference">
                                                                </div>
                                                            </div>
                                                            <div class="invoice-icon d-flex flex-column justify-content-between border-left p-25">

                                                                <div class="dropdown">
                                                                    <i class="bx bx-cog cursor-pointer dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button"></i>
                                                                    <div class="dropdown-menu p-1">
                                                                        <div class="row">
                                                                            <div class="col-12 form-group">
                                                                                <label for="discount">Remise(%)</label>
                                                                                <input name="remise" id="remise" value="0" type="number" class="form-control" id="discount" placeholder="remise" maxlength="3" min="0" max="100">
                                                                            </div>
                                                                             <div class="col-12 form-group">
                                                                                <label for="discount">Tva(%)</label>
                                                                                <input name="tva" id="tva" value="0" type="number" class="form-control" id="discount" placeholder="0" maxlength="3" min="0" max="100">
                                                                            </div>
                                                                        </div>
                                                                        <hr>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>


en fin de page html : 


<!-- BEGIN: Page JS-->
    <script src="../../../app-assets/js/scripts/pages/app-invoice.js"></script>
    <script src="../../../app-assets/js/scripts/pages/app-add_facture.js"></script>
    <script src="../../../app-assets/js/scripts/pages/myFunction_facture.js"></script>
<!-- END: Page JS-->
0
jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
19 nov. 2020 à 16:08
Vire le onchange dans ton select
et remplace ton js par 
  const selectElement = document.getElementById("article");

  selectElement.addEventListener('change', (event) => {
    console.log('La valeur du select a changée...', selectElement.value);
    var inp = document.getElementById("newarticle");
    if (selectElement.value == "Pas d'article") {
      inp.disabled = false;
    }else{
      inp.disabled = true;
    }
  });

NB: Tu remarqueras que dans le IF ... il faut utiliser la VALUE (Pas d'article) et non pas ce qui s'affiche dans la liste ...
0
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 3 > jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024
Modifié le 19 nov. 2020 à 18:06
Oui ca fonctionne mais j'ai un suite a cela mon insertion ne fonctionne plus du coup, je m'explique :
Dans mon forme tu a le choix de soit choisit un article prédéfinie ou bien de mettre un article manuellement ( select article prédéfinit , id=newarticle nouveaux article ).

Mais le problèmes c'est que quand j'appuie sur le bouton "Ajouter l'article" c'est Pas d'article qui est choisit

Illustration :

Cas ou je définie un article manuellement :



Comme vous pouvez le voir la j'ai écrit "Chaise" mais c'est "Pas de produit qui apparait"

Dans mon code js j'ai mit des conditions mais cela ne change rien ( et pas d'erreur sont déclarer dans la console)

Code js / app-add_facture.js : 


$(document).ready(function(){


        if(document.getElementById("article").value == "Pas de produit"){
            var articlee = $("#newarticle").val();
        }else{
            var articlee = $("#article").val();
        }
        
        var id = 1; 
        /*Assigning id and class for tr and td tags for separation.*/
        $("#button_send").click(function(){
            var newid = id++; 
            $("#table").append(`<tr valign="top" id="${newid}">
            <td width="100px" class="numeros${newid}">${$("#numeros").val()}</td>
            <td width="100px" class="article${newid} line">${articlee}</td>
            <td width="100px" class="referencearticle${newid} line">${$("#referencearticle").val()}</td>
            <td width="100px" class="cout${newid}">${$("#cout").val()}</td>
            <td width="100px" class="quantite${newid}">${$("#quantite").val()}</td>
            <td width="100px" class="tva${newid}">${$("#tva").val()} %</td>
            <td width="100px" class="remise${newid}">${$("#remise").val()} %</td>
            <td width="100px"><a href="javascript:void(0);" class="remCF"><i class='bx bx-x red'></i></a></td></tr>`);
        });


Html 


<div class="invoice-item-filed row pt-1 px-1">
                                                                <div class="col-12 col-md-4 form-group">
                                                                    <select id="article" class="form-control invoice-item-select">
                                                                        <option value="Pas d'article">Selectionner un article</option>
                                                                        <?php foreach($article as $articlee): ?>
                                                                        <option value="<?= $articlee['article'] ?>"><?= $articlee['article'] ?></option>
                                                                        <?php endforeach; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="cout" id="cout" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <input name="quantite" id="quantite" type="number" class="form-control" placeholder="0" onkeyup="myFunction()">
                                                                </div>
                                                                <div class="col-md-2 col-12 form-group">
                                                                          <strong id="demo" class="text-primary align-middle">00.00 €</strong>
                                                                </div>
                                                                <div class="col-md-4 col-12 form-group">
                                                                    <label for="article">Article :</label>
                                                                    <input name="article" id="newarticle" type="text" class="form-control invoice-item-desc" placeholder="Nom de l'article">
                                                                </div>
                                                                <div class="col-md-3 col-12 form-group">
                                                                    <label for="ref">REF :</label>
                                                                    <input name="referencearticle" id="referencearticle" type="text" class="form-control invoice-item-desc" placeholder="Réference"required>
                                                                </div>
                                                            </div>


J'ai cherche et le problème je pense qui viens que l'info n'est pas transmise (je doit surement me trompe ).

PS : Je ne sais pas si il faillais ouvrir une autres page pour la question . Si jamais j'ai mal fait je suis désole.
0
Réponse 3 / 3
jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
19 nov. 2020 à 18:49
Déjà.. si j'avais su que tu utilisais jquery ça aurait été bien.
Même si le code n'est pas trop différent du "pur" js, j'aurai préféré ...

Ensuite... regarde bien ton code....

Regarde, plus précisément, où tu as placé ton IF ..... il n'est clairement pas au bon endroit.


PS : A l'avenir, je te demanderai de vraiment bien "organiser" tes questions.

La question que tu as posé, concernait le fait de pouvoir désactiver un input en fonction d'un select.
Cette question est traitée et résolue ...
Donc normalement, pour ce "nouveau" souci, tu aurais du créer une nouvelle discussion.

Alors tu vas me dire... oui mais c'est lié ...
Ben... comme toutes les questions qui traitent de programmation... voir même d'informatique.... tout est lié .......(ne serait-ce que par l'auteur de la question...) mais ça reste des problématiques bien distinctes... et histoire qu'on s'y retrouve, on ouvre une discussion propre à chaque problème.

0
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 3
19 nov. 2020 à 19:17
Bien pris je vais ouvrir une nouvelle discussion, Désole.
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
comment désactiver out of range
lzri98 -
jeannets -

3 réponses
No video input après mise en veille
Shaverguy -
Shaverguy -

17 réponses