formからpostでsubmitしたリクエストがgetに変わる

お世話になっております。
reCAPTCHA v3を導入しようとしているのですが、サーバ側にjs経由でリクエストが送れずに困っております。
具体的にはPOSTのリクエストがGETに変わってしまいます。

やろうとしていることは

formをsubmitする(POST)
javascript(jQuery)でリクエストを捕まえる(preventDefault())
非同期で取得したreCAPTCHA用のトークンをhiddenタグにセットしてformのリクエストに含める
javascriptで改めてsubmitする

↓
5. POSTリクエストがGETに変わってしまう

いろいろなサイトで紹介されているコードですが、下記のように実装しました。

html
1<!DOCTYPE html>
2<html>
3<head>
4</head>
5<body>
6  <form method="post" action="form.rb" name="myform">
7    <input type="text" name="name">
8    <input name="submit" type="submit" value="送信">
9  </form>
10  <!-- reCAPTCHA v3 -->
11  <script src="https://www.google.com/recaptcha/api.js?render=<SITE-KEY>"></script>
12  <script>
13    $('form').submit(function(){
14      event.preventDefault();
15      grecaptcha.ready(function() {
16        grecaptcha.execute('<SITE-KEY>', {action: '<ACTION-NAME>'}).then(function(token) {
17          $('form').prepend('<input type="hidden" name="g-recaptcha-token" value="' + token + '">');
18          $('form').submit();
19        });
20      });
21    })
22  </script>
23  <!-- //reCAPTCHA v3 -->
24</body>
25</html>

この結果が/?g-recaptcha-token=03AF6jDqWBylKAs... のようにGETリクエストになってサーバ側に届いてしまい、原因が分からずに困っています。
手がかりでも構わないので、アドバイスを頂けると幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

event.preventDefault();ですが、eventが未定義でエラーが発生しています。
そのため、本来のsubmit処理が動作しています。
以下のようにコールバック関数に引数を指定して下さい。

javascript
1$('form').submit(function(event){
2  event.preventDefault();
3});

ただ、これでも未だ問題があり、フォームにinputタグを追加した後の$('form').submit();で再度submitしているため再帰して無限ループに陥ります。

submit前に何か処理を行いたいだけであれば、Event.preventDefaultはコールしなくてOKです。

javascript
1$('form').submit(function () {
2  $('form').prepend('<input type="hidden" name="g-recaptcha-token" value="' + "token" + '">');
3});

投稿2019/02/12 08:15

mri0815

総合スコア429

yoshiky

2019/02/12 08:26

早速の回答、ありがとうございます！ご指摘の通りでした。 > eventが未定義お恥ずかしいミスでした。。 > submit前に何か処理を行いたいだけであれば、Event.preventDefaultはコールしなくてOK こちらも問題なさそうです。勉強になりました！ありがとうございます。助かりました。

yoshiky

2019/02/12 08:49

よく動作確認をしたら、上記の修正ではprependしたinputのvalueが送信されませんでした。。 grecaptchaが非同期でgoogle側に通信しており、結果が返る前にsubmitが終わってしまうため？と推測しております。やはり一度preventDefault()でsubmitを止めて、同期的に処理するようにしなければならないような気がしますが、いかがでしょうか？？もし可能であればご教示いただけますと幸いです。

mri0815

2019/02/12 09:01

すみません、grecaptchaまでは未確認でした。submitをpreventDefault()で止めるとgrecaptchaの処理が終わってsubmitする際に再帰してしまうので、シンプルに「トークンを取得してからサブミットする」ようにしたほうが良いと思います。

yoshiky

2019/02/12 09:10 編集

アドバイスありがとうございます。 event.preventDefault();で止めてから、 grecaptchaのコールバック関数内で $('form').unbind('submit').submit(); したのですが、GETリクエストになってしまい、だめでした。。 $('form').submit(function(event){ event.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('<SITE-KEY>', {action: 'homepage'}) .then(function(token) { $('form').prepend('<input type="hidden" name="g-recaptcha-token" value="' + token + '">'); $('form').unbind('submit').submit(); }); }); })

x_x

2019/02/12 09:12

$('form').submit(); では確かに trigger() してしまうためループしてしまいますが、 $('form')[0].submit(); とすれば回避できます。

yoshiky

2019/02/12 09:25

度々申し訳ないです。 $('form').unbind('submit')[0].submit(); または $('form')[0].unbind('submit').submit(); または $('form')[0].submit(); でもGETリクエストになり、だめでした。。このHTML内にformは一つだけですが、formが配列？になっているのはなぜでしょうか。

yoshiky

2019/02/12 09:47

解決したかもしれないので報告します。まず、$('form')が配列になっていることについて、理屈は分かりませんが、 console.log($('form')) で確認したら、確かに配列のようになっていました（0にはprependしたinputタグのみのformが、1には既存のformにprependしたinputタグを追加したformが入ってしました）そのため、$('form')[1].submit();　でprependしたinputタグのデータも送信されました。しかしこれだけではうまくいかず、 TypeError: $(...)[1].submit is not a function となってしまいました。これはform内のsubmitボタンのinputタグが「name="submit"」となっていることが原因のようです。参考）https://qiita.com/_Keitaro_/items/bb5f3daa53962d30d494 name属性の値を"submit"以外にしたら、prependしたinputタグのデータも送信されました。

mri0815

2019/02/12 09:51

x_xさん＞フォローありがとうございます。 yoshikyさん> 解決されたとのことで良かったです。掲題の件とは別に疑問な点がでてきましたら、別途質問を起票することで他の方からの回答も得られやすいと思います。

yoshiky

2019/02/12 10:07

> 別途質問を起票することで他の方からの回答も得られやすいと思います。おっしゃる通りです。つい続きで質問してしまい、失礼いたしました。いずれにせよ、助かりました。ありがとうございました！

行動規範の内容に同意します