Wiki Navigation

Top > 開発ガイド > コンポーネント開発Tips集 > フォームのサブミット

フォームのサブミット

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

レイアウト用ヘルパ-ボタン配置にあるように、Rubricksではデザインの都合上、本来フォームボタンを使うべき部分に<div>や<span>等のタグを利用しています。そのため、フォームをサブミットするために<div>や<span>のonclickにサブミットを擬似的に発生させる関数を指定する必要があります。

この問題を解決するために、JavaScript?のライブラリとそれをラッピングするヘルパを提供しています。

ヘルパの利用

基本的な利用

ヘルパは下記のように利用します。

<%= span_submit '保存', 'user_edit_button'%>

第一引数がボタン名、第二引数がボタンのIDです。

RealtimeValidatorとの連携

RealtimeValidatorの機能と擬似的なサブミットを連動させるには、span_submitで指定したidをそのまま指定します。

<% validate_page do %>
  <% validate_form(user_edit_button') do %>
    <%= span_submit '保存', 'user_edit_button' %>
  <% end %>
<% end %>

FormEditorとの連携

FormEditorでは「z-index」の値を制御することでモーダル状態の切替を行っています。サブミットした後は多くの場合モーダレス状態に戻す必要があり、「modaless」メソッドを発行する必要があります。ヘルパの:modal_area_idオプションを指定することでサブミット時に自動的にモーダレス化が実施されます。

<%= span_submit '保存', 'user_edit_button', :modal_area_id => 'user_management_area' %>

ヘルパのAPI

span_submit(button_value, id, options)

引数名	必須	意味
button_value	○	ボタンの表示文字列
id	○	ボタンのid
options	-	下記参照

オプション（全て非必須）

オプション名	デフォルト値	意味
:modal_area_id	-	サブミット時にモーダル解除する領域のID。
:onclick	-	擬似サブミットボタンのonclick属性。returnするとサブミットが実施されない。
:class	buttons icon_save	CSSクラス名。
:form_id	フォームID	擬似サブミットボタンを含むフォームのID。通常指定する必要はないが、明示したい場合に指定する。

JavaScriptライブラリの利用

より細かな処理を行いたい場合はJavaScript?ライブラリを使用することもできます。

fire_onsubmit()

フォームのonsubmitイベントを発生させます。form_remote_tag系ではこちらを利用してください。

fire_onsubmit(str formId, str submitButtonId, str modalAreaId);

str formId	サブミットするフォームのDOM IDです。
str submitButtonId	不可視サブミットボタンのIDです。RealtimeValidatorと組み合わせて使う際に利用します。不可視サブミットボタンがdisabledの場合は処理を実施しません。
str modalAreaId	FormEditorの対象DOM IDです。FormEditorと組み合わせて使う際に利用します。 FormEditorのmodalessメソッドを発行します。

fire_submit()

フォームのsubmit()メソッドを発行します。form_tag系ではこちらを利用してください。

fire_submit(str formId, str submitButtonId, str modalAreaId);

str formId	サブミットするフォームのDOM IDです。
str submitButtonId	不可視サブミットボタンのIDです。RealtimeValidatorと組み合わせて使う際に利用します。不可視サブミットボタンがdisabledの場合は処理を実施しません。
str modalAreaId	FormEditorの対象DOM IDです。FormEditorと組み合わせて使う際に利用します。 FormEditorのmodalessメソッドを発行します。

サブミット処理に関するTips

テキストフィールドの個数によってフォームの挙動が変わる

上記ヘルパでは自動的にテキストフィールドが2つ追加されます。

その理由は「フォームに含まれるテキストフィールドの数によってEnter時にsubmitされるかどうかが変化するため」です。

例えば

<form>
  <input type='text' />
</form>

の場合、テキストフィールドにフォーカスを合わせてEnterを押すとonsubmit処理が実施されて画面遷移します。

一方

<form>
  <input type='text' />
  <input type='text' />
</form>

の場合、Enterを押しても無反応です。挙動を統一するために、ヘルパが見えないテキストフィールドを追加しているのです。

Download in other formats:

Plain Text