Formオブジェクト

プロパティ

プロパティ 内容
elements フォームに属するすべてのコントロール (HTMLCollection)
length フォームに属するすべてのコントロールの数
name name属性の値
acceptCharset  
action  
enctype  
encoding  
method  
target  
プロパティ - HTMLFormElement - Web API インターフェイス | MDN

メソッド

メソッド 説明
submit フォームを送信する (submitイベントは発生しない)
reset フォームを初期状態にリセットする
メソッド - HTMLFormElement - Web API インターフェイス | MDN

イベント

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>

参考

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    18章「フォームとフォーム要素」
JavaScriptのドキュメントから検索