Отключить кнопку отправки, пока не будет получено значение g-recaptcha-response для recaptcha3

Question

В настоящее время SEO оказывает существенное влияние на скорость загрузки сайта, и когда я добавляю google recaptcha3, это снижает скорость моего сайта до 35-40% в результатах Google lighthouse, поэтому я решил загружать recaptcha3 lib только тогда, когда пользователь нажимает или заполняет поле формы. , Я написал этот код, и он отлично работает для меня. Html поле формы

  <div class="control is-loading">
      <input name="instauser" id="author" class="input is-rounded is-focused is-medium" type="text" placeholder="https://instagram.com/p/41SW_pmmq4/">
   </div>
   <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="">
   <div class="control has-text-centered"><br>
      <button id="Button" type="submit" class="button is-danger is-active is-medium">Download &nbsp
      <img src="{{ asset('svg/downloads.svg') }}" width="25px"
         alt="Instagram video download" />
      </button>
   </div>
</form>

javascript код

<script type="text/javascript">

var reCaptchaFocus = function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
head.appendChild(script);

var recaptchaInterval = setInterval(function() {
if( !window.grecaptcha || !window.grecaptcha.execute ) { return; }

clearInterval( recaptchaInterval );

grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
});
}, 100 );
    document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
    };
    document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
</script>

но теперь проблема в том, что когда пользователь inte rnet медленный, тогда требуется время для загрузки скрытого входного значения g-recaptcha-response и из-за этого иногда пользователь отправляет форму перед загрузкой скрытого значения g-recaptcha-response. вот почему я хочу отключить кнопку отправки до тех пор, пока значение g-recaptcha-response не будет заполнено скрытым типом ввода, чтобы избежать ошибок ..... hero - это веб-сайт для тестирования https://igsavers.com

нужна помощь

Answer 1

вот ответ на мой вопрос

<script type="text/javascript">
var reCaptchaFocus = function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
head.appendChild(script);
document.getElementById("Button").disabled = true;

var recaptchaInterval = setInterval(function() {
if( !window.grecaptcha || !window.grecaptcha.execute ) { return; }

clearInterval( recaptchaInterval );

grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
document.getElementById("Button").disabled = false;
//document.querySelector('button[type="submit"]').setAttribute('disabled', '');
});
}, 100 );
    document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
    };
    document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
</script>