Rendre un bouton cliquable seulement quand le champ autocomplete est rempli

Version imprimable

29/02/2020, 00h34
reader27

Rendre un bouton cliquable seulement quand le champ autocomplete est rempli

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 .
29/02/2020, 09h06
ProgElecT

Salut

Citation:

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 ...... ?
29/02/2020, 11h16
reader27

1 pièce(s) jointe(s)

plus de precision

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

Ok

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

Code:

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>

29/02/2020, 11h43
reader27

merci

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

Pour le fun

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

29/02/2020, 14h11
reader27

Revoir le sujet

Merci beaucoup j essai d adapter cela

Revoir le sujet

Je n 'arrive pas à adapter

Code:

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

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