Wiki Navigation

Top > 開発ガイド > コンポーネント開発逆引きリファレンス > フォームをサブミットする

フォームをサブミットする

対象バージョン

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

概要

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

Rubricksはサブミットを擬似的に発生させるJavaScriptのライブラリとそれをラッピングするヘルパを提供しています。

使い方

基本的な使い方

方法1：span_submitを使ってボタンを記述します。

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

方法2：JavaScriptライブラリを使用します。
より細かな処理を行いたい場合はJavaScriptライブラリを直接使用することもできます。

fire_onsubmit()

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

<span id="'user_edit_button" class="buttons icon_save"
      onclick="rubricks.common.fire_onsubmit('user_edit_form');" >
  '保存'
</span>

fire_submit()

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

<span id="print_button" class="buttons darkicon_print"
      onclick="rubricks.common.fire_submit('user_print_form', 'print_button');">
  '印刷'
</span>

応用的な使い方（他機能との連携）

RealtimeValidatorとの連携
RealtimeValidatorの機能と擬似的なサブミットを連動させるには、validate_formの引数に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' %>

補足

上記ヘルパspan_submitでは自動的にテキストフィールドが2つ追加されます。その理由は「フォームに含まれるテキストフィールドの数によってEnter時にsubmitされるかどうかが変化するため」です。

例えば

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

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

一方

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

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

API

span_submit(button_value, id, options)

擬似的なサブミット可能な<span>タグを生成するヘルパです。

引数	必須	初期値	型	説明
button_value	○	-	String	ボタンの表示文字列。
id	○	-	String	ボタンのid。
options	-	-	Hash	下記「オプション」参照してください。

オプション：

キー	必須	初期値	型	説明
:modal_area_id	-	-	String	サブミット時にモーダル解除する領域のID。
:onclick	-	-	String	擬似サブミットボタンのonclick属性。returnした場合はサブミットは実施されません。
:class	-	buttons icon_save	String	CSSクラス名。
:form_id	-	フォームID	String	擬似サブミットボタンを含むフォームのID。通常指定する必要はないが、明示したい場合に指定する。

fire_onsubmit(formId, submitButtonId, modalAreaId)

フォームのonsubmitイベントを発生させます。

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

fire_submit(formId, submitButtonId, modalAreaId)

フォームのsubmit()メソッドを発行します。

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

Download in other formats:

Plain Text