PowerCMSのフォーム確認画面に「修正する」ボタンを設置する簡単な方法

この1ヶ月、PowerCMS 5とPowerCMS Xで複雑なフォームを作っていました。その際、フォーム確認画面に「修正する」ボタンを設置する必要が出たのですが、PowerCMS 5で「修正する」ボタンを設置する方法は「ContactFormで フォームの確認画面に「修正する」リンクを追加する | PowerCMS ブログ」で紹介されております。（ちなみに私がJavaScriptを修正いたしました。）

PowerCMS Xでもきっと同じ方法だろうと考えブログ記事のJavaScriptを流用しようとしたのですが、そもそもなぜJavaScriptでなければならないのか？ということを考えはじめました。単純にbutton要素が置けたら簡単です。

JavaScriptにあるコアな動き

JavaScriptにあるコアな動きは以下の3行だと私は気付きます。つまり、修正画面の時は__modeパラメーターをviewにしてPOSTをしたいのです。

buttonElem.addEventListener('click', function () {
  inputElem.value = 'view';
  node.submit();
});

button要素ではname属性とvalue属性が設定できる

ここでbutton要素について改めて確認します。「HTML Standard 日本語訳の4.10.6 button要素」を見ると以下のように記述がありました。

• name -- フォーム送信およびform.elements APIで使用する要素の名前
• value -- フォーム送信に対して使用される値

type="submit"のinput要素の場合value属性がボタンのラベルになりますが（If the element has a value attribute, the button's label must be the value of that attribute; ）、button要素の場合は内部にHTMLコンテンツを追加して整形しますよね。name属性値やvalue属性値は専らフォーム送信に対して使用されます。

テンプレート

結果、テンプレートはとても簡素になりました。まず、以下の記述は削除します。

<input type="hidden" name="__mode" value="<mt:if name="confirm_ok">submit<mt:else>confirm</mt:if>">

そして、修正するボタン・送信ボタンの所を以下のようにします。

<mt:if name="confirm_ok">
  <button type="submit" name="__mode" value="view">修正する</button>
  <button type="submit" name="__mode" value="submit">送信する</button>
<mt:else>
  <button type="submit" name="__mode" value="confirm">確認画面へ</button>
</mt:if>

PowerCMS 5・PowerCMS Xで意図した動きになる事を確認しました。なお、PowerCMS 5の場合、修正画面に戻った際に入力値を表示するカスタマイズは引き続き必要です。

過去に在籍した会社の採用情報に記されていたように記憶しているのですが、「HTML/CSSの深い理解」はやはり大切だと改めて感じました。

またこれは余談ですが、フォーム作成においてはテキスト・ラジオボタン等のフィールド毎（PowerCMS Xの場合「設問タイプ」として登録されています）にベースとなるテンプレートをきっちり作成しておくことが成否を分けるのではないかと感じました。設問が増えた場合でも修正・変更作業が容易になります。さらに、PowerCMS Xではquestionモデルにベースとなるテンプレートとの差分をメモ書きをするためだけの複数行テキストカラムを追加すると良いのではないかと思います。