【Laravel】JavaScriptでフォームを生成してsubmit
はじめに
画面内にform部品をいくつも書きたくないけど、ある要素をクリックしたらsubmitさせたい場合などがあると思います。上記要件を解決する方法の1つとして、ある要素をクリックしたらjs内でフォームを生成しsubmitする実装例を紹介します。
実装例
htmlで駅名をクリックしたらjsでフォームを生成して検索処理を実行する実装例です。
【html部分】
省略
<ul>
<li onclick="stationclick('15010');">あいうえお駅</li>
<li onclick="stationclick('15011');">かきくけこ駅</li>
<li onclick="stationclick('15012');">さしすせそ駅</li>
<li onclick="stationclick('15013');">たちつてと駅</li>
</ul>
省略
<!-- どこでもいいので空のformを作成しておく -->
<form id="hogeId" name="hogefrm" action="" method="">
@csrf
</form>
※LaravelではformにCSRFトークンを設定しないといけないため、空のフォームを作成し@csrfを記載する必要があります。
【js部分】
省略
function stationclick (prmStationCd) {
// フォームを取得してaction,method設定
const form = document.hogefrm;
form.action = 'search';
form.method = 'post';
// 送信データ設定(駅コード)
const stationCd = document.createElement('input');
stationCd.value = prmStationCd;
stationCd.name = 'station_cd';
form.appendChild(stationCd);
// フォーム送信
form.submit();
}
省略
以上