Rendre un bouton cliquable seulement quand le champ autocomplete est rempli

**reader27** · 29/02/2020, 00h34

Bonjour

Je voudrai rendre un bouton cliquable seulement quand un champ autocomplete et rempli correctement , je ne trouve pas comment faire , si vous aviez une piste pour m aiguiller pour trouver svp .

Merci d'avance .

**ProgElecT** · 29/02/2020, 09h06

Salut

et rempli correctement

Cela manque de précision,
⇨ au moins X nombre de caractères ?
⇨ que des chiffres ?
⇨ certains caractères mais pas d'autres ?
⇨ doit suivre un certain modèle ?
⇨ une combinaison des possibilités déjà indiquée ...... ?

**reader27** · 29/02/2020, 11h16

Bonjour

Oui désoler

Alors je ne peut pas dire pour le nombre de caractères , car c 'est sélection depuis une bdd qui affiche , la ville , région , et pays .
Donc en faite le membre commencera a afficher les lettre de sa ville .Une proposition lui sera proposer parmi plusieurs villes .
Jusqu’à la tout va bien , La ou je bloque de faire un bouton qui sois cliquable seulement si la personne valide son choix selon le choix qui lui sois proposer .
Je ne sais pas si je suis assez clair dans ma demande , mais j ai ajouter un un fichier pour monter se que j ai fais pour le moment , je voudrais ajouter se bouton rendu cliquable seulement si le membre choisi une réponse parmi les propositions

**ProgElecT** · 29/02/2020, 11h33

Ok

Il faut rendre ton bouton disabled = false ou disabled = true.
exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	const btn = document.getElementById("Btn1");
	Btn1.disabled = true;
 
function analyse(){
	if (choixpasbon){
		Btn1.disabled = true;
		return;
	}
	Btn1.disabled = false;
	// la suite si le choix est cohérent
}
</script>

**reader27** · 29/02/2020, 11h43

d accord merci pour la réponse rapide je vais voir avec disabled , je revient mettre en résolu une fois que j ai réussi

**ProgElecT** · 29/02/2020, 13h21

Pour le fun

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
	</head> 
	<body>
		Votre choix pour un navigateur internet:
		<br />
		<input list="navigateurs"  id="lstnav" oninput="verif()"/>
		<datalist id="navigateurs">
			<option value="Chrome">
			<option value="Firefox">
			<option value="Internet Explorer">
			<option value="Opera">
			<option value="Safari">
		</datalist>
		<button id="Btn2">Valider</button>
 
		<script>
                        const btn2 = document.getElementById("Btn2");
                        btn2.disabled = true;
                        function verif(){
                                let txt = document.getElementById("lstnav").value;
                                let cntdatas = document.getElementById("navigateurs");
                                btn2.disabled = true;
                                for (let i = 0, iMax  = cntdatas.options.length; i < iMax; i++) {
                                        if (cntdatas.options[i].value === txt){
                                                btn2.disabled = false;
                                                break;
                                        }
                                }
                        }
                </script>
	</body>
</html>

Il y a peut être mieux .... , mais cela a le mérite de fonctionner.

**reader27** · 29/02/2020, 14h11

Merci beaucoup j essai d adapter cela

**reader27** · 29/02/2020, 15h41

Je n 'arrive pas à adapter

Code HTML :

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

 <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" />

et l'appel de la page pour afficher le choix des villes se fait via ce script

Code :

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
<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch1.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });
 
});
</script>

Je ne demande pas d'avoir un script tout fait mais juste une piste pour l'adapter dessus svp , car si je remplace < option> avec le champ avec comme valeur "country" par exemple ne fonctionnera que pour les villes contenant le mot country ce qui est assez logique dans le fond

Rendre un bouton cliquable seulement quand le champ autocomplete est rempli

JavaScript

Discussions similaires

Partager

Partager