html5 で導入された button タグに付けれる formaction と formtarget 属性 を用いてプレビューを実現する

html5 で導入された（formタグではなくて）buttonタグに付けれる formaction と formtarget 属性 を用いてプレビューを実現する話です。

前提知識説明

今までの認識では送信先を示すaction属性やmethod属性はformタグにしか指定できないイメージでした。
参考: http://html5.cyberlab.info/elements/forms/form-action.html

<form action="http://html5.cyberlab.info/elements/forms/sample.php" method="post">
    <p>入力欄： <input type="text" name="sampleInput"></p>
    <p><input type="submit" value="送信"></p>
</form>

しかしながら、buttonタグに指定できる formaction属性を使用すると、formのなかのボタンごとに別々の送信先を指定できます。
参考: http://html5.cyberlab.info/elements/forms/button-formaction.html

<button type="submit" formaction="URL">ボタン名</button>

プレビューの表現について

html の書き方例

※csrf_field の記述など端折っているので、本運用で使うときには Laravel Blade の記法に乗っ取って正しくお使いください。

        // method も同様に actionmethod を使って個別に設定することができます（今回はたまたま共通なのでここで設定）
        <form class="form-horizontal" method="POST">
            <textarea name="hogehoge">ここにブラウザで入力される値を保存かプレビューのURLのどちらかに送りたい</textarea>
            <button type="submit"
                    formaction="http://fugafuga/preview"
                    // これを設定するとブラウザの別タブで開くので、よりプレビューっぽい
                    formtarget="_blank">プレビュー
            </button>
            <button type="submit"
                    // 上とは違う保存用のURL
                    formaction="http://fugafuga/">
                今すぐ更新
            </button>
        </form>

対応する laravel の Controller の書き方例

routing は端折ってます。ここはControllerの記述。

    public function preview(UpdateRequest $request)
    {
        $inputText = $request->input('hogehoge');

        return view('ここにプレビュー用のview', [
            'text' => $inputText
        ]);
    }

    public function update(UpdateRequest $request)
    {
        $inputText = $request->input('hogehoge');

        // 架空の保存メソッド
        $this->update($inputText);

        // 保存ページに戻るためのところ。本質的ではない
        return redirect()->route('piyopiyo');
    }

おまけ（プレビューも get ではなくて post で投げている理由）

1. クエリパラメタではなくてリクエストボディにinputを入れたかったから
   • get のクエリパラメタは Laravel 的には文字制限があるようで、（確か 419 status あたりの）エラーが帰ってきてしまいました

2. mozilla のドキュメントによればPOSTメソッドは 「HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザがサーバに送信するためのメソッド」

   • 今回のケースでいうと、プレビューもリクエスト本文で提供したデータを考慮したレスポンスを要求しているので、これに当てはまると考えました

     // ref: https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data