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

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/06/2019, 13h53
Devil7

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
13/06/2019, 16h14
Invité
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.
14/06/2019, 15h43
Devil7

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

17/06/2019, 12h48
psychadelic

oui, et je teste toujours avant de poster
17/06/2019, 13h46
Devil7

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 })
}

25/06/2019, 09h48
Devil7

Oui merci beaucoup maintenant ça marche super bien .

Sinon si je veux désactiver des combobox avec les inputs que dois je ajouter ?
26/06/2019, 02h40
psychadelic

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>

26/06/2019, 15h27
Invité

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) }

26/06/2019, 17h23
Devil7

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
26/06/2019, 17h35
Invité
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()
26/06/2019, 21h35
psychadelic

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!
26/06/2019, 23h48
Devil7

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 .
27/06/2019, 00h59
psychadelic

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)

Voir 40 message(s) de cette discussion en une page