Data-disable-with on invisible_recaptcha_tags

[ghost]

Hi,

The data-disable-with attribute doesn't work with the invisible_recaptcha_tags.

My code: = invisible_recaptcha_tags text: 'Sign up', class: 'btn btn-primary', 'data-disable-with' => 'Please wait...'

I also tried: = invisible_recaptcha_tags ui: :input, value: 'Sign up', class: 'btn btn-primary', 'data-disable-with' => 'Please wait...'

HTML generated with ui: :input: <input type="submit" data-sitekey="blablabla" data-callback="invisibleRecaptchaSubmit" class="g-recaptcha btn btn-primary" value="Sign up" data-disable-with="Please wait...">

EDIT:

It's weird but if I add a button_tag like this: = button_tag 'hello', class: 'btn btn-primary', data: {disable_with: 'world'}

When I click on this button, the data-disable-with of the invisible_recaptcha_tags works. Maybe the problem is in the invisibleRecaptchaSubmitfunction in client_helper.rb?

var eles = document.getElementsByClassName('g-recaptcha');
            if (eles.length > 0) {
              var form = closestForm(eles[0]);
              if (form) {
                form.submit();
              }
            }

I think the Js is stoped after the submit, so the jQuery function for data-disable-with is not executed. I'm not good with JS so I'm not sure if it's right and how I could fix that. 🤔

[grosser]

good idea! can you make a PR for it ?

On Fri, Oct 26, 2018 at 1:08 AM Robin notifications@github.com wrote:

Hi,

With simple_form, we can pass a data: {disable_with: 'Please waiting...'} option and change the button value when the user submits the form.

That would be cool if we can write something like this:

= invisible_recaptcha_tags ui: :input, value: "Sign up", class: 'btn btn-primary', 'data-disable-with' => 'Please waiting...'

or

= invisible_recaptcha_tags ui: :input, value: "Sign up", class: 'btn btn-primary', data: {disable-with: 'Please waiting...'}

It seems like there's no option for do this with invisible_recaptcha_tags, is it possible to allow developers to do this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ambethia/recaptcha/issues/295, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAsZ-npItbwYSEWW2XgDpWqTHWjK0okks5uosMYgaJpZM4X7vD8 .

[ghost]

Hi @grosser, I really would like but I'm not sure to know how can I fix it. I'm going to search an easy solution.

Unless if I just have to create the pull request without the solution 😅

[grosser]

Needs a new option in https://github.com/ambethia/recaptcha/blob/master/lib/recaptcha/client_helper.rb should be straight forwrd

On Mon, Oct 29, 2018 at 2:37 AM Robin notifications@github.com wrote:

Hi @grosser https://github.com/grosser, I really would like but I'm not sure to know how can I fix it. I'm going to search a easy solution.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ambethia/recaptcha/issues/295#issuecomment-433844746, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAsZ6L26m_PvmYSDuKkthNbQ74_ekoAks5upsxbgaJpZM4X7vD8 .

[ghost]

It's a bit more complex, I think there's a 'conflict' between the recaptcha API and the custom callback, the js is stopped, restarted, stopped, restarted...

Also, there's a problem with the programmatically invoke because I don't get the recaptcha response in my params. In the network devtools there's no response.

my view:

= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class: 'invisible-recaptcha-form'}) do |f|

 [...]

      .normal-signin-box
        .form-actions.text-right
          %p.text-align-right= f.button :submit, "S'inscrire".html_safe, class: "btn btn-primary", id: 'submit-btn', data: {disable_with: "Inscription..."}
          = invisible_recaptcha_tags ui: :invisible, callback: 'submitInvisibleRecaptchaForm'
          .control-group{ class: (resource.errors.has_key?(:recaptcha) ? 'error' : '') }
            %span.text-danger.text-right= f.error :recaptcha

application.js:

// Invisible recaptcha
document.getElementById('submit-btn').addEventListener('click', function (e) {
  grecaptcha.execute();
});

var submitInvisibleRecaptchaForm = function () {
  document.getElementByClass("invisible-recaptcha-form").submit();
};

I know that I have an error (no response from reCaptcha) but I don't know why.

I'm using a class for the form because with an id I have some problems with ajax (but it's not the fault of recaptcha).

[grosser]

idk :( ... please make a PR or comment here if you figure it out

[duarme]

Dunno if this can help, but I solved it simply adding 'data-disable-with': 'your disable message...' ) to the helper call, like this:

<%= invisible_recaptcha_tags(text: 'Send', id: 'submit_inquiry_form', class: 'btn btn-primary', hl: 'it', 'data-disable-with': 'sending...' ) %>

And it worked! 🤷‍♂️

(V2, Rails 5)