フォーム（Form）｜prototype.jsリファレンス｜Ajax

TOP Ajaxフォーム（Form）

serializeElements〔serializeElements()〕
フォーム要素をアクティブにする（フォーカス＋内容選択）
request〔request()〕
送信内容をエンコード〔serialize()〕
フォーム要素が空か調べる〔present()〕
最初に有効化されている要素を取得／フォーカスを当てる〔findFirstElement()／focusFistElement()〕
フォームの有効化／無効化〔clear()〕
フォーム要素の内容を消去〔activate()〕
フォームのリセット〔reset()〕
フォーム要素にフォーカスを当てる〔enabed()／disabled()〕
フォーム内の特定の要素を取得〔getInputs()〕
フォーム内の要素をすべて取得〔getElements()〕
フォーム要素の内容を選択〔select()〕

serializeElements
serializeElements()

unknown

結果文字列=Form.serializeElements(フォーム要素[, getHash=false]);

<form action="#" onsubmit="return false;">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>性別：
        <input type="radio" name="sex" id="sex1" value="1" />男
        <input type="radio" name="sex" id="sex2" value="2" checked="checked" />女
    </p>
    <p>ペット：
        <input type="checkbox" name="pet_1" id="pet_1" value="dog" checked="checked" />犬
        <input type="checkbox" name="pet_2" id="pet_2" value="cat" />猫
        <input type="checkbox" name="pet_3" id="pet_3" value="other" />その他
    </p>
    <p>
        <input type="submit" onclick="fSerializeElements(this.form,'text');" value="テキストボックスの内容をエンコード" /><br>
        <input type="submit" onclick="fSerializeElements(this.form,'radio');" value="ラジオボタンの内容をエンコード" /><br>
        <input type="submit" onclick="fSerializeElements(this.form,'checkbox');" value="チェックボックスの内容をエンコード" /><br>
        <textarea id="res_serializeelements" style="width:90%; height:6em;"></textarea>
    </p>
</form>

<script type="text/javascript">
    function fSerializeElements(formElement, type){
        $("res_serializeelements").value=Form.serializeElements($(formElement).getInputs(type));
    }
</script>

フォーム要素をアクティブにする（フォーカス＋内容選択）

unknown

Field.activate(element);

サンプルを見る

<form action="#">
    <p>名前：<input type="text" id="userName7" size="20" value="渋谷 太郎" />
    <p>年齢：<input type="text" id="userAge7" size="3" value="20" />&nbsp;才</p>
    <p>
        <input type="button" onclick="fActivate('userName7')" value="「名前｣をアクティブに" />
        <input type="button" onclick="fActivate('userAge7')" value="「年齢」をアクティブに" />
    </p>
</form>

<script type="text/javascript">
    function fActivate(elm){
        Field.activate(elm);
    }
</script>

request
request()

unknown

$(フォーム要素).request([options]);

サンプルを見る

<form action="/content/demo/test.php" method="post">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>性別：
        <input type="radio" name="sex" id="sex1" value="1" />男
        <input type="radio" name="sex" id="sex2" value="2" />女
    </p>
    <p>ペット：
        <input type="checkbox" name="pet_1" id="pet_1" value="dog" />犬
        <input type="checkbox" name="pet_2" id="pet_2" value="cat" />猫
        <input type="checkbox" name="pet_3" id="pet_3" value="other" />その他
    </p>
    <p>趣味：<br>
        <select name="hobbies[]" id="hobbies" multiple="multiple" type="select-multiple">
            <option>映画</option>
            <option selected="selected">読書</option>
            <option>音楽</option>
            <option selected="selected">その他</option>
        </select>
    </p>
    <p>
        <input type="submit" onclick="fRequest(this.form);" value="リクエスト" /><br>
        <textarea id="res_getinputs" style="width:90%; height:6em;"></textarea>
    </p>
</form>

<script>
    function fRequest(formElement){
        $(formElement).request({
            method: 'get',
            parameters: { interests:'JavaScript', 'hobbies[]':['映画', '音楽'] },
            onComplete: function(){ alert('Form data saved!') }
        })
    }
</script>

送信内容をエンコード
serialize()

unknown

Form.serialize(フォーム要素[, getHash=false]);

サンプルを見る

<form action="#" onsubmit="fSerialize(this); return false;">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="userAge9" size="3" value="20" />&nbsp;才</p>
    <p>
         趣味：
        <select name="hobbies[]" id="hobbies" multiple="multiple">
            <option>映画</option>
            <option>読書</option>
            <option>音楽</option>
            <option>その他</option>
        </select>
    </p>
    <p>
        <input type="submit" value="送信内容をエンコード" />
    </p>
    <textarea id="res_serialize" style="width:90%;"></textarea>
</form>


<script type="text/javascript">
    function fSerialize(formElement){
        $("res_serialize").value=$(formElement).serialize();
    }
</script>

フォーム要素が空か調べる
present()

unknown

結果フラグ=Field.present(element);

サンプルを見る

<form action="#">
    <p>名前：<input type="text" id="userName4" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" id="userAge4" size="3" value="" />&nbsp;才</p>
    <p>住所：<input type="text" id="userAddr4" size="60" value="東京都渋谷区某所" /></p>
    <p>
        <input type="button" onclick="fPresent()" value="空欄チェック" /><br>
        <textarea id="res_present" style="width:90%;"></textarea>
    </p>
</form>

<script type="text/javascript">
    function fPresent(){
        var ary={"userName4":"名前","userAge4":"年齢","userAddr4":"住所"};
        var errStr="";
        for(var key in ary){
            if(Field.present(key)==false){
                errStr+="「"+ary[key]+"」が空欄です。\n";
            }
        }
        $("res_present").innerHTML=errStr;
    }
</script>

最初に有効化されている要素を取得／フォーカスを当てる
findFirstElement()／focusFistElement()

unknown

Form.findFirstElement(フォーム要素);
Form.focusFirstElement(フォーム要素);

サンプルを見る

<form action="#">
    <p>ユーザーID：<input type="text" id="userid" size="20" value="A0001" disabled="disabled" />
    <p>
        　氏：<input type="text" id="lastname" size="5" value="渋谷" />
        　名：<input type="text" id="firsetname" size="5" value="太郎" disabled="disabled" />
    </p>
    <p>年齢：<input type="text" id="age" size="3" value="20" />&nbsp;才</p>
    <p>
        <input type="button" onclick="fFindFirstElement(this.form)" value="最初に有効な要素を取得" />
        <input type="button" onclick="fFocusFirstElement(this.form)" value="最初に有効な要素にフォーカスを当てる" />
    </p>
    <textarea id="res_findfirstelement" style="width:90%;"></textarea>
</form>

<script type="text/javascript">
    function fFindFirstElement(formElement){
        $("res_findfirstelement").value=Form.findFirstElement(formElement).inspect();
    }
    function fFocusFirstElement(formElement){
        Form.focusFirstElement(formElement);
    }
</script>

フォームの有効化／無効化
clear()

unknown

Form.enabled(フォーム要素);
Form.disabled(form);

サンプルを見る

<form action="#" id="userForm10">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>
         趣味：
        <select name="hobbies[]" id="hobbies" multiple="multiple">
            <option>映画</option>
            <option>読書</option>
            <option>音楽</option>
            <option>その他</option>
        </select>
    </p>
</form>
<p>
    <input type="button" onclick="fEnabled();" value="フォームの有効化・無効化切替" />
</p>


<script type="text/javascript">
    function fEnabled(){
        var form=$("userForm10");
        form[form.disabled ? 'enable' : 'disable']();
        form.disabled = !form.disabled;
    }
</script>

フォーム要素の内容を消去
activate()

unknown

Field.clear(element);

サンプルを見る

<form action="#">
    <p>名前：<input type="text" id="userName2" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" id="userAge2" size="3" value="20" />&nbsp;才</p>
    <p>住所：<input type="text" id="userAddr2" size="60" value="東京都渋谷区某所" /></p>
    <p>
        <input type="button" onclick="fClear()" value="フォーム要素の内容を消去" /><br>
    </p>
</form>

<script type="text/javascript">
    function fClear(){
        var ary=["userName2","userAge2","userAddr2"];
        for(var i=0; i<ary.length; i++){
            Field.clear(ary[i]);
        }
    }
</script>

フォームのリセット
reset()

unknown

Form.reset(フォーム要素);
$(フォーム要素).reset();

デフォルトの値や選択状態は、リセットされません。リセットすると、デフォルトの値及び選択状態に戻ります。

サンプルを見る

<form action="#">
    <p>▼現在、表示されているデフォルトの状態にリセットされます。</p>
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>趣味：<br>
        <select name="hobbies[]" id="hobbies" multiple="multiple">
            <option>映画</option>
            <option selected="selected">読書</option>
            <option>音楽</option>
            <option selected="selected">その他</option>
        </select>
    </p>
    <p>
        <input type="button" onclick="fReset(this.form);" value="リセット" />
    </p>
</form>

<script type="text/javascript">
    function fReset(elm){
        //Form.reset(elm);
        $(elm).reset()
    }
</script>

フォーム要素にフォーカスを当てる
enabed()／disabled()

unknown

Field.focus(element);

サンプルを見る

<form action="#">
    <p>名前：<input type="text" id="userName5" size="20" value="渋谷 太郎" />
    <p>年齢：<input type="text" id="userAge5" size="3" value="20" />&nbsp;才</p>
    <p>
        <input type="button" onclick="fFocus('userName5')" value="「名前｣にフォーカス" />
        <input type="button" onclick="fFocus('userAge5')" value="「年齢」にフォーカス" />
    </p>
</form>

<script type="text/javascript">
    function fFocus(elm){
        Field.focus(elm);
    }
</script>

フォーム内の特定の要素を取得
getInputs()

unknown

input要素オブジェクトForm.getInputs(フォーム要素[, type[, name]]);

第1引数formElementのみの場合は、すべてのinput要素の情報を取得します。

オプションの第2引数typeには、input要素のtype属性に指定する値を指定します。

type
値	説明
text	テキストボックス。
radio	ラジオボタン。
checkbox	チェックボックス。
button	通常のボタン。
submit	送信ボタン。
reset	リセットボタン。
image	画像ボタン。

オプションの第3引数nameには、input要素のname属性に指定した値を指定します。

セレクトボックス、テキストエリアなど、input要素でないものは取得できません。

サンプルを見る

<form action="#" onsubmit="return false;">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>性別：
        <input type="radio" name="sex" id="sex1" value="1" />男
        <input type="radio" name="sex" id="sex2" value="2" />女
    </p>
    <p>ペット：
        <input type="checkbox" name="pet_1" id="pet_1" value="dog" />犬
        <input type="checkbox" name="pet_2" id="pet_2" value="cat" />猫
        <input type="checkbox" name="pet_3" id="pet_3" value="other" />その他
    </p>
    <p>趣味：<br>
        <select name="hobbies[]" id="hobbies" multiple="multiple">
            <option>映画</option>
            <option selected="selected">読書</option>
            <option>音楽</option>
            <option selected="selected">その他</option>
        </select>
    </p>
    <p>
        <input type="submit" value="送信" id="btnSubmit" />
        <input type="reset" value="リセット" id="btnReset" />
        <input type="image" src="/content/img/btn/btn_on.gif" alt="送信" id="btnImage" />
    </p>
    <p>
        <input type="button" onclick="fGetInputs(this.form,'');" value="すべての要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'text');" value="テキストボックスの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'radio');" value="ラジオボタンの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'checkbox');" value="チェックボックスの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'button');" value="通常のボタンの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'submit');" value="送信ボタンの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'reset');" value="リセットボタンの要素情報を取得" /><br>
        <input type="button" onclick="fGetInputs(this.form,'image');" value="画像ボタンの要素情報を取得" /><br>
        <textarea id="res_getinputs" style="width:90%; height:6em;"></textarea>
    </p>
</form>

<script type="text/javascript">
    function fGetInputs(formElement, type){
        var elementObj=Form.getInputs(formElement, type);
        $("res_getinputs").value=elementObj.inspect();
    }
</script>

フォーム内の要素をすべて取得
getElements()

unknown

要素オブジェクト=Form.getElements(フォーム要素);

サンプルを見る

<form action="#" onsubmit="return false;">
    <p>名前：<input type="text" name="name" id="name" size="20" value="渋谷 太郎" /></p>
    <p>年齢：<input type="text" name="age" id="age" size="3" value="20" />&nbsp;才</p>
    <p>性別：
        <input type="radio" name="sex" id="sex1" value="1" />男
        <input type="radio" name="sex" id="sex2" value="2" />女
    </p>
    <p>ペット：
        <input type="checkbox" name="upet_1" id="upet_1" value="dog" />犬
        <input type="checkbox" name="upet_2" id="upet_2" value="cat" />猫
        <input type="checkbox" name="upet_3" id="upet_3" value="other" />その他
    </p>
    <p>趣味：<br>
        <select name="hobbies[]" id="hobbies" multiple="multiple">
            <option>映画</option>
            <option selected="selected">読書</option>
            <option>音楽</option>
            <option selected="selected">その他</option>
        </select>
    </p>
    <p>
        <input type="submit" value="送信" id="btnSubmit" />
        <input type="reset" value="リセット" id="btnReset" />
        <input type="image" src="/content/img/btn/btn_on.gif" alt="送信" id="btnImage" />
    </p>
    <p>
        <input type="button" onclick="fGetElements(this.form);" value="要素情報を取得" /><br>
        <textarea id="res_getelements" style="width:90%; height:6em;"></textarea>
    </p>
</form>

<script type="text/javascript">
    function fGetElements(formElement){
        var elementObj=Form.getElements(formElement);
        $("res_getelements").value=elementObj.inspect();
    }
</script>

フォーム要素の内容を選択
select()

unknown

Field.select(element);

サンプルを見る

<form action="#">
    <p>名前：<input type="text" id="userName6" size="20" value="渋谷 太郎" />
    <p>年齢：<input type="text" id="userAge6" size="3" value="20" />&nbsp;才</p>
    <p>
        <input type="button" onclick="fSelect('userName6')" value="「名前｣を選択" />
        <input type="button" onclick="fSelect('userAge6')" value="「年齢」を選択" />
    </p>
</form>

<script type="text/javascript">
    function fSelect(elm){
        Field.select(elm);
    }
</script>

prototype.jsリファレンス イベント（Event）

prototype.jsリファレンス 関数（Function）

PHP & JavaScript Room

prototype.jsリファレンスフォーム（Form）

serializeElements
serializeElements()

フォーム要素をアクティブにする（フォーカス＋内容選択）

request
request()

送信内容をエンコード
serialize()

フォーム要素が空か調べる
present()

最初に有効化されている要素を取得／フォーカスを当てる
findFirstElement()／focusFistElement()

フォームの有効化／無効化
clear()

フォーム要素の内容を消去
activate()

フォームのリセット
reset()

フォーム要素にフォーカスを当てる
enabed()／disabled()

フォーム内の特定の要素を取得
getInputs()

フォーム内の要素をすべて取得
getElements()

フォーム要素の内容を選択
select()

関連コンテンツ

prototype.jsリファレンスフォーム（Form）

serializeElementsserializeElements()

フォーム要素をアクティブにする（フォーカス＋内容選択）

requestrequest()

送信内容をエンコードserialize()

フォーム要素が空か調べるpresent()

最初に有効化されている要素を取得／フォーカスを当てるfindFirstElement()／focusFistElement()

フォームの有効化／無効化clear()

フォーム要素の内容を消去activate()

フォームのリセットreset()

フォーム要素にフォーカスを当てるenabed()／disabled()

フォーム内の特定の要素を取得getInputs()

フォーム内の要素をすべて取得getElements()

フォーム要素の内容を選択select()

関連コンテンツ

serializeElements
serializeElements()

request
request()

送信内容をエンコード
serialize()

フォーム要素が空か調べる
present()

最初に有効化されている要素を取得／フォーカスを当てる
findFirstElement()／focusFistElement()

フォームの有効化／無効化
clear()

フォーム要素の内容を消去
activate()

フォームのリセット
reset()

フォーム要素にフォーカスを当てる
enabed()／disabled()

フォーム内の特定の要素を取得
getInputs()

フォーム内の要素をすべて取得
getElements()

フォーム要素の内容を選択
select()