désactiver le bouton

Version imprimable

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:

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:

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:

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:

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 ?

25/04/2012, 23h01
NoSmoking

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.
26/04/2012, 17h01
aspkiddy

Bonjour NoSmoking,

Citation:

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

Citation:

Envoyé par NoSmoking

...file est la fonction d'envoi.

Pour faire la requête sql dans un fichier PHP

Alors que je dois faire ? :roll:
Merci
26/04/2012, 17h27
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 ?
26/04/2012, 17h32
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 ?
26/04/2012, 18h36
RomainVALERI

Citation:

Envoyé par Watilin

Petite remarque :
je suis un pirate.

Tsss, j'en étais sur... :furieux:

(:mouarf:)
26/04/2012, 18h40
aspkiddy

Citation:

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

Citation:

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:

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ésolés, nous ne pouvons prendre en compte votre commande.</h2>"; }

26/04/2012, 18h49
aspkiddy

Donc comment peux-je le faire ???8O:roll:
Pourquoi vais-je cela : c'est juste pour être un peu plus ergonomique : faire éviter une action inutile (un clic supplémentaire) aux utilisateurs...:lol:
26/04/2012, 18h50
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é

Citation:

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:

1 2 <label style="display: none;" class="error checked" generated="true" for="courriel"> </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...8O
Code:

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 } ?> />
:oops:

26/04/2012, 20h06
NoSmoking
Citation:

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

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:

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

:fleche: Comprendre les mécanismes d'AJAX

concernant cette partie !!!!
Code:

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);
26/04/2012, 22h27
aspkiddy

Citation:

Envoyé par NoSmoking

ceci n'est pas une preuve :lol:

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

:fleche: 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 ?
27/04/2012, 09h59
Kaamo

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:

$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é)
27/04/2012, 21h19
Watilin
Moi je vois ça comme ça, en gros :
1. L'utilisateur tape un email ;
2. A chaque (*) keyPress, tu fais un GET en Ajax vers ton serveur, qui fait à son tout un SELECT vers ta base de données ;
3. Le serveur envoie la réponse, qui peut être un simple booléen ;
4. Dans la fonction de rappel de ta requête Ajax (via JavaScript donc), tu désactives (ou réactives) le bouton, comme ceci :
  Code:
  
  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.

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

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

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 :ccool:
Alors pour le bouton, j'ai fait un autre fonction, et je l'ai ajouté dans mon javascript :

Code:

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:

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:

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

et j'ai ajouté mon appel au fonction :

Code:

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

30/04/2012, 17h44
aspkiddy

Citation:

Envoyé par aspkiddy

(...)
tout fonctionne...:ccool:

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