認証後にreCAPTCHAを消す方法は

Question

Googleが提供する「reCAPTCHA」をこちらのサイトを参考に実装しました。

参考サイト：https://syncer.jp/how-to-introduction-recaptcha

何ら問題はないのですが、

しいて言えば、認証後の「reCAPTCHA」を消したいです。

素人考えではありますが、

参考にしたコードには「function」があるのですが、

こちらで何かしら制御出来ないものでしょうか？

function syncerRecaptchaCallback( code )
{
	if(code != "")
	{
		$( '#syncer-recaptcha-form input , #syncer-recaptcha-form button' ).removeAttr( 'disabled' ) ;
	}
}

例えば、認証後は

<div class="g-recaptcha" data-sitekey="{あなたのSite key}"></div>

上記を「display: none;」にするとか・・・

もしくは別の方法ありましたら教えてください。

Answer 1

参考サイトを確認しましたが、
data-callback属性の文字列がコールバック関数として呼ばれると書いてあります。

<div class="g-recaptcha" data-callback="hogeCallBack" data-sitekey="{あなたのSite key}"></div>

function hogeCallBack(code) {
  if (code != '') return;
 
  const hoge = document.querySelector('.g-recaptcha');
  hoge.style.display = 'none'
}

引数のcodeとか動作するかとかは分かりませんが、こんな感じだと思います。

追記

<div class="g-recaptcha" data-callback="syncerRecaptchaCallback" data-sitekey="{あなたのSite key}"></div>

function syncerRecaptchaCallback(code) {
  if (code != '') return;
 
  $( '#syncer-recaptcha-form input , #syncer-recaptcha-form button' ).removeAttr( 'disabled' ) ;
  $( '.g-recaptcha' ).css( 'display', 'none' );
}

Comments

[hizirida]

素人なもので、どう書き換えてよいか分かりませんです。

[hizirida]

function syncerRecaptchaCallback( code )
{
if(code != "")
{
$( '#syncer-recaptcha-form input , #syncer-recaptcha-form button' ).removeAttr( 'disabled' ) ;
}
}
上記をどのように書き換えするとようのでしょうか。

[mukkun]

過去の質問を見る限りできそうですが。。
回答内容をみてどうすれば良いか分からないのであれば、
回り道でも入門から始めたほうが絶対に良いです。※時には必要かもしれませんが。
分からないまま他人のソースをペタペタしても、
知識として蓄えられないのでまた同じ事象の時に困りますよ。

---
「syncerRecaptchaCallback」は参考サイトの作者様が命名した関数名であって、
googleの「reCAPTCHA」を使用した際に必ず呼ばれるものではありません。
回答内容に記載している「data-callback="?"」はてな部分に「syncerRecaptchaCallback」を記載して、
「data-callback="syncerRecaptchaCallback"」とした際に、「function syncerRecaptchaCallback()」が呼ばれます。

今回の回答内容では「hogeCallBack」としているので、「function hogeCallBack()」が呼ばれます。
---

これでできそうでしょうか。

[hizirida]

<div class="g-recaptcha" data-callback="hogeCallback" data-sitekey="{あなたのSite key}"></div>

function hogeCallback( code )
{
if(code != "")
{
$( '#recaptcha-form input , #recaptcha-form submit' ).removeAttr( 'disabled' ) ;
}
if (code != '') return;

const hoge = document.querySelector('.g-recaptcha');
hoge.style.display = 'none'
}
</script>

こんな感じに変更しましたが、認証後消えません。
どこか記述間違えてますよね。

[mukkun]

「</script>」の開始タグが無いように見受けられます。
また、記載されている「function hogeCallback( code )」の直下に存在する、「if(code != "")」ですが、後述している「if (code != '')」と被っているのはわかりますでしょうか。

前述したとおり、質問内容にソースを記載頂いている
「function syncerRecaptchaCallback( code )」ですが、
サイトの作者様が、submitボタンを「disabled」にしたい場合のソースを書いています。

ですが、今回は非表示にしたいということなので、
質問内容の「function syncerRecaptchaCallback( code )」とその中身は一旦忘れましょう。

自分が回答した「function hogeCallBack(code)」は非表示にするソースになっている？はずです。

期待通りの動作をしない際は、
F12キーを押下して、デベロッパーツールを表示させると、
ヒントが得られるかもしれません。

ブラウザ毎のデベロッパーツールの開き方
http://www.hp-stylelink.com/news/2014/06/20140606.php#list05

[hizirida]

流れとして
reCAPTCHAを表示させ、その認証ボタンを押すまではsubmitボタンを「disabled」にし、
認証されたらreCAPTCHAを非表示にし、submitボタンの「disabled」が消える。
です。