こんにちは。システム開発部のよしもとです。
エンジニアとして働き始めてそろそろ半年がたちますが、今開発に携わらせていただいている部分で学んだことを復習も兼ねて残そうと思います。
エンジョイワークスでは不動産仲介、建築設計、ファンド事業の他、自社で宿泊施設や企業研修所など、たくさんの施設の運営もしています。
↓施設運営グループ（グッドネイバーズ ）のサイト
https://good-neighbors.link/
そういった施設は当然予約をたくさん取って行かないといけないのですが、経路としては自社HPや予約サイトなど、複数の入り口から予約が入ってきます。
僕は現在、そのいろいろな経路から入ってきた予約データを一元管理するシステムの機能拡張を行っています。
フロント側ではWordpressを使っており、HTML/CSS、PHP、Java Script、サーバーサイド側はLaravel（PHPフレームワーク）で書いており、デザイン面以外はすべて僕が進めています。
その中で施設の予約フォームを作る機会があり、formタグを使ったPOST送信周りで困ったことがありました。
①1ページの入力データを2つの違うページに向けて送れるよう、それぞれボタンを設置したい
予約フォームには入力してもらった内容を確認する画面を設けており、間違いがあれば「戻る」、内容に問題がなければ予約を「確定」してもらうボタンを用意しています。
（よくあるやつですね。）
「戻る」ボタンにはinputタグのtype=”submit”を使っています。
意図としては予約入力画面に戻っても、前のページで入力してもらった内容を確実に保持させるため。
ここで困ったことになりました。
入力内容をデータベースに登録するために「確定」ボタンでもPOST送信する必要があるけど1つのページから2つの違うページに向けてPOST送信したい。
これに対してはHTML5から便利な属性が追加されているみたいです。
inputタグ内にformactionで送信先を指定することで送信先を上書きすることができます。
<form method="POST" name="form1" action="https://hoge.com">
・・・
<input type="submit" value="戻る" formaction="https://hoge.com/previous_page">
</form>
これで「戻る」ボタンを押した際にformタグ内で指定している”https://hoge.com”ではなく、formactionで指定している”https://hoge.com/previous_page”に遷移します。
ちなみにformタグが入れ子にさえならなければ、1ページで複数のformタグを設置するのは問題ないようです。
- OK -
<form method="POST" name="form1" action="https://hoge1.com">
・・・
<input type="submit" value="button1">
</form>
<form method="POST" name="form2" action="https://hoge2.com">
・・・
<input type="submit" value="button2">
</form>
- NG -
<form method="POST" name="form1" action="https://hoge1.com">
<form method="POST" name="form2" action="https://hoge2.com">
・・・
<input type="submit" value="button2">
</form>
<input type="submit" value="button1">
</form>
②「確定」ボタンでAPI通信後（JavaScript動作後）にページを遷移させたい
入力してもらった内容をデータベースに登録するためにサーバーサイド側にリクエストを送る必要があるのですが、その通信をJavaScriptで実装しています。
「確定」ボタンのワンクリックで登録とページ遷移を行い、さらに次のページで登録内容の一部を表示させたい…
そんなときのためにJavaScriptにはform送信を行ってくれるメソッドsubmit()が用意されています。
（最終的には以下のような形のコードになりました。）
<form method="POST" name="form1" action="https://hoge.com">
・・・
<input type="submit" value="戻る" formaction="https://hoge.com/previous_page">
<input type="button" id="complete" name="complete" value="確定">
</form>
<script>
const complete = document.getElementById('complete')
complete.addEventListener('click', function() {
・・・
}
・・・（API通信処理）
document.form1.submit()
これでAPIとの通信処理の後にname属性”form1″を指定しているformタグがsubmitされます。
ちなみにinputタグのtypeは”button”としていますが、”submit”でも可能です。
ただその場合はデフォルトの動作をストップするために
complete.addEventListener('click', function(e) {
e.preventDefault()
・・・
}
としてあげる必要があります。
これで元々のsubmitが実行されずにJavaScriptのsubmitでのみform送信が実行されます。
最後に…
今回、作成した予約フォームは葉山にある平野邸 hayamaという宿泊とスペース貸しの機能を備えた施設のスペース貸しの方のもので、近日リリース予定です。
↓平野邸 hayama HP
https://hiranoteihayama.com/
次回気が向いたらサーバーサイド側の紹介とかできたらなと思っています。
