#概要
reCAPTCHAのチェックボックス、わざわざクリックしたのにフォームの送信ボタンをわざわざもう一回押さなきゃいけないのって面倒くさいと思ったんですよ。
いや、それくらいやれよって思う人も居ると思うんですよ。わかってますよ。
でも僕みたいに最小限の操作だけで物事を行いたいって人も居ると思うんです。
まぁ今回はそんな面倒くさがりの僕みたいなユーザーばっかりのサービスを作るあなたにぴったりなお話です。
※注意
今回はサーバーサイド側のコードは一切ありません。
全てJavaScriptだけで完結しています。
サーバー側はこっちのコードの使いまわしです。
もし宜しかったらこっちの方も見てやってくだしあ！！
まず普通に動くHTMLコードを用意します
無い人はこっちから引っ張って来ましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>reCAPTCHAのサンプル</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="login" method="post">
ID:<input type="text" name="id"><br>
パスワード:<input type="password" name="current-password">
<div class="g-recaptcha" data-sitekey="[あなたのサイトキー]"></div>
<input type="submit" value="ログイン">
</form>
</body>
</html>
引っ張ってきました。
送信ボタンを消します
この記事では送信ボタンはいらない子です。
g-recaptchaの要素にdata-callbackを追加
チェックボックスが押された時にreCAPTCHAに実行してもらう関数名を決めます。
ここでは「formSubmit」と決めています。
<div class="g-recaptcha" data-sitekey="[あなたのサイトキー]"></div>
<!-- ↓こう追加する -->
<div class="g-recaptcha" data-sitekey="[あなたのサイトキー]" data-callback="formSubmit"></div>
送信するフォームをJavaScriptから手に取れるようにする
formに名前を付けましょう。
ここでは「loginForm」と決めています。
今からお前の名前はloginFormだ！いいかい、loginFormだよ。分かったら返事をするんだ、loginForm！！
<form action="login" method="post">
<!-- ↓こう追加する -->
<form action="login" method="post" name="loginForm">
ここが肝心！JavaScriptを書く！
それではチェックボックスにチェックが入ったら叩かれる関数を書きましょう。
function formSubmit(){
document.loginForm.submit();
}
実行されたら指定したformのsubmit()を実行するだけです。
簡単ですねぇ～～～
テスト
完成したら試しに実行してみましょう
以下のGIFのようになれば成功です。
おまけ
やっぱちゃんとチェックボックスが入るアニメーションがみたいですよね？
JavaScriptのsetTimeoutを使って送信を遅らせましょう。
function formSubmit(){
setTimeout(function() {
document.loginForm.submit();
},1000);
}
