Désactiver la saisie d'un Input type=text si un autre est renseigné

Bonjour

J'ai un formulaire de recherche et , je veux Désactive la saisie dans un Input type=text si un autre input est renseignée .

Exemple : si l'utilisateur commence a écrire dans le input1 le input2 se désactivera automatiquement .

Merci

Bonjour,

Citation:

---

Envoyé par Devil7

...Désactive(r) la saisie dans un Input type=text si un autre input est renseignée...

---

• disabled ou readonly.

Non c'est pas ça ,

Ce que je veux c'est lors de la saisie , si l'utilisateur commence a saisir dans un champ les autres se désactivent automatiquement .

Et si le champ est de nouveau vide il peut saisir dans n'importe lequel.

Merci

je vois pas en quoi d'autre on peut traduire le mot désactiver autrement que par disabled en anglais javascript.

Code:

---

1 2 3 4 5

<form id="my-form"> in1:<input type="text" id="in1"> in2:<input type="text" id="in2"> in3:<input type="text" id="in3"> </form>

---

Code:

---

1 2 3 4 5 6 7 8

const All_in = document.querySelectorAll('#my-form input')   All_in.forEach(xIn=>xIn.addEventListener('keypress',priorize) )   function priorize() { let txtVide = ( this.value === '' ) All_in.forEach(xIn=>{ if (xIn !== this) xIn.disabled = !txtVide }) }

---

J'ai copier le code comme il est mais ça n'a rien donner !!

tu l'a testé avant ?

j'ai chercher un peu dans le net et j'ai trouvé ce code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<input type="text" id="demo" onkeypress="myFunction()"> <input type="text" id="demot" onkeypress="myFunction()">   <script> function myFunction() { if(document.getElementById("demo")!=""){ document.getElementById("demo").disabled = "disabled";}else{ document.getElementById("demot").disabled = "disabled";} } </script>

---

c'est bien ce que je veux mais le soucie c'est que quand je vide l' input , l'autre reste disable .

Merci

oui, et je teste toujours avant de poster

Bon le code que tu m'a donner marche bien sauf que j'ai toujours le soucie quand je vide l' input , l'autre reste disable .

Merci

Effectivement, j'ai testé un peu trop succinctement mon code.
une petite erreur ente keypress et keyup...

Code:

---

1 2 3 4 5

<form id="my-form"> in1: <input type="text" id="in1"><br><br> in2: <input type="text" id="in2"><br><br> in3: <input type="text" id="in3"> </form>

---

Code:

---

1 2 3 4 5 6 7 8 9

const All_in = document.querySelectorAll('#my-form input')   All_in.forEach(xIn=>xIn.addEventListener('keyup',priorize) )   function priorize() { let txtVide = ( this.value === '' ) All_in.forEach(xIn=>{ if (xIn !== this) xIn.disabled = !txtVide }) }

---

Oui merci beaucoup maintenant ça marche super bien .

Sinon si je veux désactiver des combobox avec les inputs que dois je ajouter ?

pareil; lui coller un disabled à true

Désolé mais je n'est pas bien saisie votre réponse donc voici mon code :

votre script :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<script> const All_in = document.querySelectorAll('#my-form input')   All_in.forEach(xIn=>xIn.addEventListener('keyup',priorize) )   function priorize() { let txtVide = ( this.value === '' ) All_in.forEach(xIn=>{ if (xIn !== this) xIn.disabled = !txtVide }) } </script>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div class="control-group">   <label class="control-label">nom : </label>   <input type="text" placeholder="nom" class="input-small" id="in1" name="nom" />     <label class="control-label">prenom : </label>   <input type="text" placeholder="prenom" class="input-mini" id="in2" name="prenom" />     <label class="control-label">adresse : </label>   <SELECT NAME="lstcl" id="in5"> <OPTION VALUE ="1">adresse</OPTION> </SELECT>   </div>

---

ça n'a pas marcher !

Encore Merci

... que dire... il y encore du chemin sur ta courbe d'aprentissage...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<form id="my-form"> <div class="control-group"> <label class="control-label">nom : </label> <input type="text" placeholder="nom" class="input-small" id="in1" name="nom" /> <label class="control-label">prenom : </label> <input type="text" placeholder="prenom" class="input-mini" id="in2" name="prenom" /> <label class="control-label">adresse : </label> <select name="lstcl" id="in5"> <option value="1">adresse</OPTION> </select> <div> </form>

---

(ce serait utile de t'interresser aux <fieldset> )

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!-- placer TOUT le JS en fin de body--> <script>   const MyForm = document.querySelector('#my-form') , All_in = MyForm.querySelectorAll('input') ;   All_in.forEach(xIn=>xIn.addEventListener('keyup',priorize) )   function priorize() { let txtVide = ( this.value === '' ) All_in.forEach(xIn=>{ if (xIn !== this) xIn.disabled = !txtVide }) }   // pour désactiver le select : MyForm.lstcl.disabled = false   </script> </body> </html>

---

Citation:

---

Envoyé par psychadelic

... que dire... il y encore du chemin sur ta courbe d'aprentissage...

---

@psychadelic

Il faut quand même avouer que tu lui "balances" du code "pro" (c'est-à-dire COMPLEXE pour un débutant), sans mettre la moindre explication.
Ça manque d'une pointe de pédagogie, non ?
Parfois, tu me donnes l'impression de vouloir "étaler ta science"... :roll:

Tu pourrais au moins lui expliquer cette ligne de code :

Code:

---

All_in.forEach(xIn=>xIn.addEventListener('keyup',priorize) )

---

voire mettre des lignes équivalentes, en code "SIMPLE" et plus facile à assimiler pour un débutant.

J'aimerais bien une petite explication aurais le bienvenue ... par ce que j'ai avancer un peu dans le code et je ne sais pas comment désactiver les combobox j’appelle avec la méthode include depuis un autre fichier comme ça :

page index :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<form id="my-form"> <div class="control-group"> <label class="control-label">nom : </label> <input type="text" placeholder="nom" class="input-small" id="in1" name="nom" /> <label class="control-label">prenom : </label> <input type="text" placeholder="prenom" class="input-mini" id="in2" name="prenom" />   <label class="control-label">adresse</label> <div class="controls" > <?php                                                 include("fonction/load_adresse.php");                                          ?> </div>   </div> </form>

---

la page load_adresse.php :

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

<?php   include("commun/connection.php"); $requete = "SELECT ID_adresse,N_adresse FROM adresse ORDER BY ID_adresse ASC"; $result = mysqli_query($idConnect,$requete) or die( "Exécution requête impossible."); mysqli_close( $idConnect);       $ld = "<SELECT NAME='lstcl' 'id='in5'>"; $ld .= "<OPTION VALUE=0>Choisissez</OPTION>";   while ( $row = mysqli_fetch_array( $result)) {   $numcl = $row["ID_adresse"]; $nomcl = $row["N_adresse"];   $ld .= "<OPTION VALUE='$numcl'>$nomcl</OPTION>"; } $ld .= "</SELECT>";     print $ld;       ?>

---

Merci d'avance

1- Que le code soit dans un fichier en "include PHP" ne change rien : c'est comme si ce code était dans la même page.

2- Regarde le "code HTML généré" ("Ctrl" + "U").

Tu constateras (au moins) une erreur ici :

Code:

---

$ld = "<SELECT NAME='lstcl' 'id='in5'>";

---

Quant au while, inutile de créer des variables superflues :

Code:

---

1 2 3

while ( $row = mysqli_fetch_array( $result)) { $ld .= "<option value='" . $row["ID_adresse"] . "'>" . htmlspecialchars($row["N_adresse"]) . "</option>" . "\n"; // (\n : passage à la ligne dans le code) }

---

Pour les inputs ça marche mais pour les combobox ça marche pas ils restent toujours enable , ils ne se désactive pas !

Pour le code : $ld = "<SELECT NAME='lstcl' 'id='in5'>"; c’était juste une erreur de frappe .

Merci

Code:

---

All_in = MyForm.querySelectorAll('input')

---

As-tu compris qu'il s'agit des <input> ?

Il faut adapter cette ligne de code, pour ajouter les <select>.

• voir : Document.querySelectorAll()

de toute façons, désactiver le select, je veux bien, mais sur quels critères ? quand Mars et Jupiter sont en conjonction ?

s'Il n'y a aucune explication claire ici, c'est aussi du coté de la question!

Merci psychadelic votre code ma vraiment aidé par contre j'aimerais bien désactiver les select aussi et encore merci

Et Merci aussi jreaux62 de m'avoir simplifier et expliquer d'avantage sur le code mais pour les select çà n'a pas marcher .

Oui, bon, mais cela n'indique toujours pas la moindre logique pour désactiver le select : quand doit-il être désactivé ? tout le temps ou sinon sous quelles conditions ? ( en Français cela s'appelle des critères)

Il bien a la saisie bien sur en faite j'ai un formulaire de recherche , qui contient 4 input et 3 combobox ( remplie depuis la bdd ) donc si je commence a saisir dans un champ les autres input + les 3 select se désactiveront .

Si je sélectionne une valeur dans le combobox les 2 autres combo + les 4 input se désactiveront .

Donc en gros je veux limité la recherche par un seul critère

Merci

Bonjour,

1- je t'ai mis un lien dans ce message.
As-tu cliqué ? As-tu LU ?
As-tu adapté la ligne de code ?


2- Peut-être que ta méthodologie n'est pas la bonne, ou pas la plus efficace.

Citation:

---

Envoyé par Devil7

...je veux limité la recherche par un seul critère ...

---

On peut envisager de soumettre le formulaire (-> .submit()):

• dès qu'un input est rempli (-> onblur / onkeyup)
• ou dès qu'un choix dans une liste déroulante est fait (-> onchange)

IMPORTANT : On n'est pas là pour faire tout le travail à ta place....
Je suis déjà bien gentil de te mettre des liens... encore faut-il que TU CLIQUES dessus...