désactiver le bouton

**aspkiddy** · 25/04/2012, 22h56

Bonjour,

J'ai un champ de texte pour les emails et un bouton "Envoyer"...
Si ce email a été déjà utilisé, je vais désactiver ce bouton :

Voici mes étapes :

Code :

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

1
2
3
4
5
6
 
<label>Votre email<span class="rose"><strong>*</strong></span> :
<input name="email" type="text" id="email" onKeyUp="verifCourriel(this.value)"  /></label>
<!-- onkeypress="return valid_mail(event);"-->
<label class="error checked" generated="true" for="email">&nbsp;</label>
<div id="divPourVrfEmail"></div><input type="submit"  name="submit" id="submit" value="Envoyer" />

Lorsque l'utilisateur tape son courriel, on vérifie si ce courriel existe dans la basse de données, au fur et mesure qu'il tape les lettres...
Si cela existe on lui dit que ce courriel est déjà existé :

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
24
25
26
27
 
function writediv_vrf_email(texte) {
	document.getElementById('divPourVrfEmail').innerHTML = texte;
}
 
 
function verifCourriel(email) {
    if (email != '') {
        if (email.length < 0)
            writediv_vrf_email('<span style="color:#cc0000"><b>' + email + ' :</b>trop court</span>');
        else if (email.length > 200)
           writediv_vrf_email('<span style="color:#cc0000"><b>' + email + ' :</b>trop long</span>');
        else if (texte = file('verification_email.php?email=' + escape(email))) {
            if (texte == 1)
                writediv_vrf_email('+email+');
 
            else if (texte == 2)
                writediv_vrf_email('+email+');
 
            else
                writediv_vrf_email(texte);
				//document.mon_form_name.submit.disabled = true; 
 
        }
    }
 
}

et voici mon fichier verification_email.php
include"mabase_d.php";

Code :

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

1
2
3
4
5
6
7
8
$result = mysql_query("SELECT colone_email FROM $table_db WHERE colone_email='".$_GET["email"]."'");
 
if(mysql_num_rows($result)>=1)
 
 
echo "<span style=\"color:#cc0000\"><b>Attention ce courriel à été DÉJÀ utilisé avec ces lettres</b> Autrement dit, vous ne pouvez pas utiliser ce courriel</span>";
else
echo "<span style=\"color:#1A7917\"><b>Vous pouvez utiliser ce courriel qui n'existe pas encore</b> donc ce courriel est libre</span>'";

Jusqu'au ici tout va bien... Mais je vais ajouter une autre fonctionnalité : lorsque le courriel est existe, il faut que mon bouton devienne inactif (disabled)... Comment peux-je faire ?

voici ce que j'ai ajouté dans mon bouton :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <input type="submit"  name="submit" id="submit" value="Envoyer"  <?php 
 
include"mabase_d.php";
$rslt = mysql_query("SELECT colone_email FROM $table_db WHERE colone_email='".$_GET["email"]."'");
if(mysql_num_rows($rslt)>=1)
{
        echo 'disabled="disabled"';
}
else
{
// rien
}
 
?> />

Mais mon bouton est toujours actif parce que je n'arrive pas récupérer la valeur du champ «*email*» par $_GET[«*email*»]
alors que je dois faire ?

**NoSmoking** · 26/04/2012, 00h01

Bonsoir,
je présumes que les transactions ce font en Ajax et que file est la fonction d'envoi.
Quand traites tu le retour ?

Un classique AJAX : utiliser les données au bon moment !

Perso je ne ferais le test qu'à la soumission.

**aspkiddy** · 26/04/2012, 18h01

Bonjour NoSmoking,

Envoyé par NoSmoking

... les transactions ce font en Ajax ...

Non, les transactions se font en php! Ajax c'est seulement pour la vérification de email....

Envoyé par NoSmoking

...file est la fonction d'envoi.

Pour faire la requête sql dans un fichier PHP

Alors que je dois faire ?

Merci

**Kaamo** · 26/04/2012, 18h27

ne sachant pas ce que fait file, je dois avouer que je ne vois pas le problème.
Tu utilises quoi pour faire l'AJAX ? une librairie ou un code perso ?

**Watilin** · 26/04/2012, 18h32

Petite remarque :
je suis un pirate. Je veux me connecter sur ton site, et je tape une adresse qui existe déjà : le bouton se désactive. J'ouvre Firebug, je sélectionne le bouton, et je mets sa propriété disabled à false. Ceci met permet d'envoyer quand même la requête.

Est-ce que ton code côté serveur prévoit ce genre de scénario ?

**RomainVALERI** · 26/04/2012, 19h36

Envoyé par Watilin

Petite remarque :
je suis un pirate.

Tsss, j'en étais sur...

(

)

**aspkiddy** · 26/04/2012, 19h40

Envoyé par Kaamo

ne sachant pas ce que fait file, je dois avouer que je ne vois pas le problème.
Tu utilises quoi pour faire l'AJAX ? une librairie ou un code perso ?

Même si tu sais le lien vers File... tu ne peux rien faire puisque c'est un fichier en php et que tu ne peux lire que le message...

en outre, il n'y a qu'une requête pour voir si le courriel existe ou non avec le message....

D'ailleurs je n'utilise AJAX qu'afficher le message aux les utilisateur en disant que ce courriel est existé ou non!!!

**aspkiddy** · 26/04/2012, 19h45

Envoyé par Watilin

Petite remarque :
je suis un pirate. Je veux me connecter sur ton site, et je tape une adresse qui existe déjà : le bouton se désactive. J'ouvre Firebug, je sélectionne le bouton, et je mets sa propriété disabled à false. Ceci met permet d'envoyer quand même la requête.

Est-ce que ton code côté serveur prévoit ce genre de scénario ?

tu peux envoyer les informations en changeant la propriété de bouton (d'ailleurs c'est comme cela pour le moment) mais tu ne peux pas les enregistrer ces informations dans la BDD :

dans mon 3e fichier en php il y a une condition :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if(mysql_num_rows($verification_email)<1)
						{
// enregistrer les données
 
}
						else
						{
							echo "<h2>D&eacute;sol&eacute;s, nous ne pouvons prendre en compte votre commande.</h2>";
 
 }

**aspkiddy** · 26/04/2012, 19h49

Donc comment peux-je le faire ???

Pourquoi vais-je cela : c'est juste pour être un peu plus ergonomique : faire éviter une action inutile (un clic supplémentaire) aux utilisateurs...

**Kaamo** · 26/04/2012, 19h50

file est une fonction javascript qui doit implémenter l'objet 'AJAX' qui se charge d'envoyer à php la requête. Selon ce que j'ai compris en tout cas.

c'est pour cela que je voulais voir le code javascript qui se charge de faire tout ça. Peut-être y a t il un mauvais transfert de ce coté

**aspkiddy** · 26/04/2012, 20h01

Envoyé par Kaamo

file est une fonction javascript qui doit implémenter l'objet 'AJAX' qui se charge d'envoyer à php la requête. Selon ce que j'ai compris en tout cas.

c'est pour cela que je voulais voir le code javascript qui se charge de faire tout ça. Peut-être y a t il un mauvais transfert de ce coté

En fait le code JavaScript (avec fonction file) ça marche puisque J'arrive afficher le message dans le div "divPourVrfEmail" : au fur et mesure que l'utilisateur tape son email

Code :

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

1
2
  <label style="display: none;" class="error checked" generated="true" for="courriel">&nbsp;</label>
              </p><div id="divPourVrfEmail"><span style="color: rgb(26, 121, 23);"><b>Vous pouvez utiliser ce courriel qui n'existe pas encore</b> donc ce courriel est libre</span>'</div>

Mon code en PHP qui se trouve dans le bouton ne marche pas parce que je n'arrive pas capter la valeur d'email tapé par php...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <input type="submit"  name="submit" id="submit" value="Envoyer"  <?php 
 
include"mabase_d.php";
$rslt = mysql_query("SELECT colone_email FROM $table_db WHERE colone_email='".$_GET["email"]."'");
if(mysql_num_rows($rslt)>=1)
{
        echo 'disabled="disabled"';
}
else
{
// rien
}
 
?> />

**NoSmoking** · 26/04/2012, 21h06

En fait le code JavaScript (avec fonction file) ça marche puisque J'arrive afficher le message dans le div "divPourVrfEmail" : au fur et mesure que l'utilisateur tape son email

ceci n'est pas une preuve

Je constate que tu ne t'ai pas donné la peine de lire le lien que je t'ai mis....

Explication , (tentative plutôt)

Code :

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

else if (texte = file('verification_email.php?email=' + escape(email)))

ici tu affectes à texte la valeur en retour de file, c'est louable mais très moyen, lors du retour il y a belle burette que tu n'es plus dans la fonction verifCourriel, attendu que tu es en mode asynchrone, les frappes en cours laissant apparaître les modifications.

Il te faut donc sur le RETOUR du serveur
- remplir le champ suivant la réponse
- disabled le bouton suivant la réponse

Comprendre les mécanismes d'AJAX

concernant cette partie !!!!

Code :

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

1
2
3
4
5
6
if (texte == 1)
  writediv_vrf_email('+email+'); // tu écris juste "+email+"
else if (texte == 2)
  writediv_vrf_email('+email+'); // tu écris juste "+email+"
else
  writediv_vrf_email(texte);

**aspkiddy** · 26/04/2012, 23h27

Envoyé par NoSmoking

ceci n'est pas une preuve

Je constate que tu ne t'ai pas donné la peine de lire le lien que je t'ai mis....

(...) attendu que tu es en mode asynchrone, les frappes en cours laissant apparaître les modifications.

Il te faut donc sur le RETOUR du serveur
- remplir le champ suivant la réponse
- disabled le bouton suivant la réponse

Comprendre les mécanismes d'AJAX
(...)

Je ne comprends pas du tout... alors donnes moi un peu de temps pour digérer tous cela... et ensuite je vais revenir...

Merci et à bientôt... demain ?

**Kaamo** · 27/04/2012, 10h59

de plus, à mon avis, tu n'as rien du tout dans $_GET["email"].
Un ptit réflexe à avoir : faire un print_r($GET) pour voir ce qu'il y a dedans.

et attention à

Code php :

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

$rslt = mysql_query("SELECT colone_email FROM $table_db WHERE colone_email='".$_GET["email"]."'");

c'est open bar ce genre de chose. Après, je pense que tu le sais vu que tu échappes email de ta fonction javascript. (qui, entre nous, pourrait très bien être détourné)

**Watilin** · 27/04/2012, 22h19

Moi je vois ça comme ça, en gros :

L'utilisateur tape un email ;
A chaque (*) keyPress, tu fais un GET en Ajax vers ton serveur, qui fait à son tout un SELECT vers ta base de données ;
Le serveur envoie la réponse, qui peut être un simple booléen ;

Dans la fonction de rappel de ta requête Ajax (via JavaScript donc), tu désactives (ou réactives) le bouton, comme ceci :

Code :

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

1
2
3
leBouton.disabled = true; // pour désactiver
// ou
leBouton.disabled = false; // pour réactiver

(*) Pour ne pas envoyer « trop » de requêtes inutiles, on peut attendre que l'utilisateur fasse une petite pause avant d'interroger le serveur. Ceci peut se faire au moyen d'un simple timer, que l'on remet à zéro au début de la fonction keypress. Un délai de 0.5s me semble raisonnable.

**aspkiddy** · 30/04/2012, 18h42

Bonjour tout le monde,
Enfin, la vérification d'email marche :
voici mon JavaScript avec Jquery

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
jQuery.noConflict(); 
 
 function div_verification_control_email(texte) {
	document.getElementById('divPourVrfEmail').innerHTML = texte;
}
 
 
function verifCourriel(email) {
    if (email != '') {
        if (email.length < 0)
            div_verification_control_email('<span style="color:#cc0000"><b>' + email + ' :</b>trop court</span>');
        else if (email.length > 200)
           div_verification_control_email('<span style="color:#cc0000"><b>' + email + ' :</b>trop long</span>');
        else if (texte = file('verification_email.php?email=' + escape(email))) {
            if (texte == 1)
                div_verification_control_email('+email+');
 
            else if (texte == 2)
                div_verification_control_email('+email+');
 
            else
                div_verification_control_email(texte);
 
        }
    }
 
}
 
// merci pour NoSmoking et Kaamoo 
//implémenter l'objet 'AJAX'
function file(fichier) {
    if (window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
    else if (window.ActiveXObject) // IE
        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return (false);
    xhr_object.open("GET", fichier, false);
    xhr_object.send(null);
    if (xhr_object.readyState == 4) return (xhr_object.responseText);
    else return (false);
}

et voici mon code html

Code :

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

1
2
3
4
5
<label>Votre email<span class="rose"><strong>*</strong></span> :
<input name="email" type="text" id="email" onchange="verifCourriel(this.value)"  /></label>
<!-- onkeypress="return valid_mail(event);"-->
<label class="error checked" generated="true" for="email">&nbsp;</label>
<div id="divPourVrfEmail"></div><input type="submit"  name="submit" id="submit" value="Envoyer" />

tout va bien

Alors pour le bouton, j'ai fait un autre fonction, et je l'ai ajouté dans mon javascript :

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
function button_submit(email) {
    if (email != '') {
     	if (bouton_email = file('verification_email/vrf_submit.php?email=' + escape(email))) {
             if (bouton_email == 1)
                div_button_submit('+email+');
 
            else if (bouton_email == 2)
                div_button_submit('+email+');
 
            else
                div_button_submit(bouton_email);
 
 
        }
    }
 
}

dans mon fichier php, (vrf_submit.php), je désactive/réactive le bouton :

Code :

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

1
2
3
4
5
6
if(mysql_num_rows($result)>=1)
 
 
echo '<input type="submit"  name="submit" id="submit" value="Envoyer" disabled="disabled"/>';
else
echo '<input type="submit"  name="submit" id="submit" value="Envoyer"/>';

ensuit j'ai créé mon div, div_button_submit, :

Code :

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

<div id="div_button_submit"></div>

et j'ai ajouté mon appel au fonction :

Code :

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

1
2
3
<label>Votre email<span class="rose"><strong>*</strong></span> :
<input name="email" type="text" id="email" onchange="verifCourriel(this.value);button_submit(this.value)"  /></label>
<label class="error checked" generated="true" for="email">&nbsp;</label>

tout fonctionne...

**aspkiddy** · 30/04/2012, 18h44

Envoyé par aspkiddy

(...)
tout fonctionne...

Est-ce que peut-on faire autrement, plus court que le mien ?

désactiver le bouton

JavaScript

Discussions similaires

Partager

Partager