Mettre un input griser si le select est selectionner [Résolu]

Signaler
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
-
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
-
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

Messages postés
30235
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2020
2 993
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

Cordialement,
Jordane
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
3
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;
    }
    
}

Messages postés
30235
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2020
2 993 >
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020

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 )
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
3
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-->

Messages postés
30235
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2020
2 993
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 ...
Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
3 >
Messages postés
30235
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2020

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.
Messages postés
30235
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2020
2 993
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.

Messages postés
31
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
20 novembre 2020
3
Bien pris je vais ouvrir une nouvelle discussion, Désole.