prototype.jsリファレンスフォーム(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" /> 才</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" /> 才</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" /> 才</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" /> 才</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="" /> 才</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.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" /> 才</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.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" /> 才</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" /> 才</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();
$(フォーム要素).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" /> 才</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" /> 才</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属性に指定する値を指定します。
値 | 説明 |
---|---|
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" /> 才</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" /> 才</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" /> 才</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>