フォーム入力・送信した内容が、ブラウザバックすると消える問題

最近ブログぜんぜんでしたけど、生きてます。私です。

今回ぶち当たった実装の問題について書きます。

■問題

フォーム送信後、遷移先からブラウザバックしたとき、

フォームに前に入力した内容が保持されていない。

■原因

送信ボタンがtype=submitではなかったから。

submitがjsでされていた（form.submit();）

■解決方法

送信時は、input type="submit" でやること。

送信先や送信方法が異なるなら、input type="submit" のタグに

formaction="送信先URL" や、formmethod="GET/POST" を使うこと。

例：<input type="submit" value="送信" formaction="/test/hoge" formmethod="GET" />

■補足・その他蛇足

原因については、ネットで調べている際、

autocomplete=offになっていると保持されないらしい記事も見つかりました。

今回はこの限りではなかったですが、今後気を付けなきゃなぁ…よく使うから。

また、

Laravelはリダイレクトだと保持されないというTeratailが見つかりました。

こちらはおそらく今回の解決方法で解決できるものだと思われます。

私が今回実装した画面も、ボタン押下後にリダイレクトするものですが、今日の修正でちゃんと引き継がれるようになったので。

Teratailにある理論はあってると思うんです。

ブラウザがこのフォームを送信した、というのが鍵で入力が引き継がれるはず。

type=submitでは送信情報をブラウザが持っているけど、

jsでsubmitしたらjsが全部持って行っちゃうのかな…となんとなくそう考えました。

jsでやると、ブラウザはその命令された操作に従うだけで、何を入力したとかはしらんってことなんだろうなぁって感じ。

ダークエリア