IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Recaptcha invisible avec deux boutons pour un form


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 69
    Points : 34
    Points
    34
    Par défaut Recaptcha invisible avec deux boutons pour un form
    Bonjour,

    J'ai eu du mal à choisir la section, mon problème étant plutôt lié à l'utilisation du recaptcha invisible de google. Cela englobe donc du JS, PHP et html.

    J'ai un site web sur lequel j'utilise recaptcha v2. Jusqu'ici tout allait bien, mais je suis séduit par le nouveau recaptcha invisible, beaucoup plus élégant.

    Je me met donc en tête de l'installer. J'ai sans problème réussi à faire marcher le recaptcha, en utilisant le code de google :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
      <form id='demo-form' action="page.php" method="POST">
          <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>
          <br/>
        </form>

    Je vous met le code exemple, c'est exactement ce que j'ai fait sur mon form. Tout fonctionne bien pour ce bouton.

    Seulement, le problème est que j'ai deux boutons pour chaque form sur mon site. Le site se charge de déchiffrer par exemple du vigenere, porta, trithème, etc etc. Donc un champ texte ou textarea, et deux bouton chiffrer ou déchiffrer qui utilisent évidemment le même form. Je différencie les deux boutons en leur attribuant une value que je teste ensuite en POST avec un isset.

    Donc j'ai tout bêtement ajouté un second champ button :


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
      <form id='demo-form' action="page.php" method="POST">
          <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' value="chiffrer">Chiffer</button>
          <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' value="dechiffrer">Déchiffrer</button>
          <br/>
        </form>

    Et là ça ne fonctionne pas. Je me doute bien que google doit voir seulement le premier.

    Donc j'ai continué mes recherches, et j'ai trouvé la méthode du invisible div (enfin trouvé, c'était sur la page officielle de chez google). Seulement j'ai beau essayer tout ce qui me vient en tête, rien à faire.
    Si j'utilise le code de chez google :

    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
    36
     
    <html>
    <head>
    <script>
      function onSubmit(token) {
        alert('thanks ' + document.getElementById('field').value);
      }
     
      function validate(event) {
        event.preventDefault();
        if (!document.getElementById('field').value) {
          alert("You must add text to the required field");
        } else {
          grecaptcha.execute();
        }
      }
     
      function onload() {
        var element = document.getElementById('submit');
        element.onclick = validate;
      }
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    </head>
    <body>
       <form>
         Name: (required) <input id="field" name="field">
         <div id='recaptcha' class="g-recaptcha"
              data-sitekey="your_site_key"
              data-callback="onSubmit"
              data-size="invisible"></div>
         <button id='submit'>submit</button>
       </form>
    <script>onload();</script>
    </body>
    </html>

    Cela fonctionne sans problème, sauf que ça ne recharge pas la page. J'aimerais recharger la page et envoyer la variable POST['g-recaptcha-response'] qui sera traitée alors.

    Je dois avouer que je m'y perd à force de chercher entre les grecaptcha.render() et les grecaptcha.execute();, je ne sais plus quoi faire et quoi utiliser. Tous les exemples ou presque, que j'ai trouvé sur internet reprennent le code de chez google ce qui ne m'aide pas plus.

    Si quelqu'un ici a une petite idée qui me ferait avancer, je l'en remercie d'avance
    Bonne journée et merci.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. problème avec deux boutons submit pour un formulaire
    Par fattouch_squall dans le forum Langage
    Réponses: 1
    Dernier message: 22/12/2007, 14h42
  2. Formulaire avec deux boutons
    Par Oberown dans le forum Langage
    Réponses: 1
    Dernier message: 12/09/2005, 18h06
  3. Réponses: 8
    Dernier message: 09/03/2005, 11h47
  4. [JTable] Cellule avec deux boutons
    Par cherbox dans le forum Composants
    Réponses: 3
    Dernier message: 12/08/2004, 18h26
  5. Réponses: 10
    Dernier message: 10/06/2004, 17h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo