Discussion :

[Devil7]

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

[Invité]

Bonjour,

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

• disabled ou readonly.

[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

[psychadelic]

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Devil7]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[psychadelic]

oui, et je teste toujours avant de poster

[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

[psychadelic]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Devil7]

Oui merci beaucoup maintenant ça marche super bien .

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

[psychadelic]

pareil; lui coller un disabled à true

[Devil7]

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

votre script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[psychadelic]

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

... 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"...

Tu pourrais au moins lui expliquer cette ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Devil7]

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 HTMl :

Sélectionner tout - Visualiser dans une fenêtre à part

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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!

[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 .

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