Javascript 禁用提交按钮,直到检索到recaptcha3 g-recaptcha-response值

Javascript 禁用提交按钮,直到检索到recaptcha3 g-recaptcha-response值,javascript,laravel,Javascript,Laravel,现在SEO对站点加载速度有很大影响,当我添加google recaptcha3时,我的站点速度会在google lighthouse结果中降低到35-40%,这就是为什么我决定只在用户单击或填写表单字段时加载recaptcha3库的原因。我已经写了这段代码,它对我来说很好 Html表单字段 <div class="control is-loading"> <input name="instauser" id="author" class="input is-ro

现在SEO对站点加载速度有很大影响,当我添加google recaptcha3时,我的站点速度会在google lighthouse结果中降低到35-40%,这就是为什么我决定只在用户单击或填写表单字段时加载recaptcha3库的原因。我已经写了这段代码,它对我来说很好
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>

var recaptchhafocus=函数(){
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(脚本);
var recaptchaInterval=setInterval(函数(){
如果(!window.grecaptcha | |!window.grecaptcha.execute){return;}
clearInterval(recaptchaInterval);
grecaptcha.execute('6ldveswuaaaadnvg2ng4zifa4mfkujiulmlgnuy',{action:'homepage'})。然后(函数(令牌){
document.getElementById('g-recaptcha-response')。value=token;
});
}, 100 );
document.getElementById('author')。removeEventListener('focus',reCaptchaFocus);
};
document.getElementById('author')。addEventListener('focus',recapchafocus,false);
但现在的问题是,当用户互联网速度较慢时,加载隐藏的g-recaptcha-response输入值需要时间,因此,有时用户会在加载隐藏的g-recaptcha-response值之前提交表单。这就是为什么我想禁用submit按钮,直到在hidden input type中填充g-recaptcha-response值,以避免任何错误。。。。。英雄是要测试的网站


需要帮助吗这里是我问题的答案

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

var recaptchhafocus=函数(){
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(脚本);
document.getElementById(“按钮”).disabled=true;
var recaptchaInterval=setInterval(函数(){
如果(!window.grecaptcha | |!window.grecaptcha.execute){return;}
clearInterval(recaptchaInterval);
grecaptcha.execute('6ldveswuaaaadnvg2ng4zifa4mfkujiulmlgnuy',{action:'homepage'})。然后(函数(令牌){
document.getElementById('g-recaptcha-response')。value=token;
document.getElementById(“按钮”).disabled=false;
//document.querySelector('button[type=“submit”]).setAttribute('disabled','');
});
}, 100 );
document.getElementById('author')。removeEventListener('focus',reCaptchaFocus);
};
document.getElementById('author')。addEventListener('focus',recapchafocus,false);