Formオブジェクト
プロパティ
| プロパティ | 内容 |
|---|---|
| elements | フォームに属するすべてのコントロール (HTMLCollection) |
| length | フォームに属するすべてのコントロールの数 |
| name | name属性の値 |
| acceptCharset | |
| action | |
| enctype | |
| encoding | |
| method | |
| target |
メソッド
| メソッド | 説明 |
|---|---|
| submit | フォームを送信する (submitイベントは発生しない) |
| reset | フォームを初期状態にリセットする |
イベント
submit
submit()メソッドの呼び出しでは、submitイベントは発生しません。 Should jQuery's $(form).submit(); not trigger onSubmit within the form tag? - Stack Overflow Steve Nyholm : Javascript - capturing onsubmit when calling form.submit()
しかし<input type="submit" />のclick()メソッドからならば発生します。またreset()の呼び出しでは、問題なくresetイベントが発生します。
フォームからのイベントを捕捉し、それをキャンセルします。
reset
Formがリセットされたときに発生します。HTMLFormElement: reset event - Web APIs | MDN
サンプルコード
form内の要素を参照する方法
たとえばformが次のように定義されているとき、
<form action="">
<input type="text" name="foo" />
<input type="text" name="bar-baz" />
<input type="submit" />
</form>
submitのハンドラでは、thisがそのformを参照することになります。よってHTMLCollectionのメソッドを利用して、name属性またはid属性からform内の要素にアクセスできます。
document.forms[ 0 ].onsubmit = function()
{
var a = this.foo.value;
var b = this[ 'bar-baz' ].value;
return false;
}
name属性などが設定されていない場合には、elementsプロパティからでも参照できます。たとえば次の3つは、すべて同じform内の要素を参照します。
var form = document.forms[ 0 ]; form.elements[ 0 ]; form[ 0 ]; form.foo;
空の要素を送信しない方法
?a=1&b=のようなリクエストを、?a=1とする方法を考えます。
disabled属性がtrueに設定されたinput要素は送信されないため、値が設定されていない要素のdisabledをtrueにします。get - How can I remove empty fields from my form in the querystring? - Stack Overflow
form.onsubmit = function()
{
this.a.disabled = ( this.a.value === '' );
this.b.disabled = ( this.b.value === '' );
this.c.disabled = ( this.c.value === '' );
return true;
}
ただしこの方法だと、disabledがtrueに設定された要素は後から値を変更できなくなってしまいます。よってformを再利用するならば、送信後にdisabledをfalseに設定し直します。
form.onsubmit = function()
{
var a = this.a;
a.disabled = ( a.value === '' );
window.setTimeout( function()
{
a.disabled = false;
}, 0 );
return true;
}
フォームの送信前に確認ダイアログを表示する方法
submitイベントを捕捉することで、フォームの送信前にユーザーに確認を求めるダイアログを表示できます。
確認ダイアログの表示
確認ダイアログはWindow.confirm()メソッドで表示します。このメソッドはユーザーにより[OK]ボタンがクリックされるとtrueを、[キャンセル]ではfalseを返します。
送信のキャンセル
一方でユーザーによりフォームの[送信]ボタンがクリックされたときには、Formオブジェクトのonsubmitイベントハンドラでそれを検出できます。このonsubmitハンドラがfalseを返すと送信はキャンセルされるため、先のconfirm()メソッドの戻り値をそのまま返すようにします。
<form onsubmit="return confirm( '送信を実行しますか？' );" action="" method="get"> <input type="text" name="data" /> <input type="submit" /> </form>