formObject.elementsコレクション

formObject.elementsは、form要素(フォーム要素)内のフォーム部品要素のコレクション。

構文

$formObject.elements[];

$formObject.elements[0]; // 1つ目のフォーム部品要素への参照
$formObject.elements[1]; // 2つ目のフォーム部品要素への参照

$formObject.elements[0].value; // 1つ目のフォーム部品要素の値

サンプル

【入力欄】
名前:
地域:

【出力欄】
名前:
地域:

サンプルの動作について

  • 【入力欄】の「名前:」の右横のテキスト入力欄の内容を変更すると、テキスト入力欄の内容を、【出力欄】の「名前:」の右横に表示する。
  • 【入力欄】の「地域:」の右横のセレクトボックスで地域を選択すると、選択した地域名を、【出力欄】の「地域:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    getValue();
    var $formObject = document.getElementById( "sampleForm" );
    for( var $i = 0; $i < $formObject.length; $i++ ) {
        $formObject.elements[$i].onkeyup = function(){
            getValue();
        };
        $formObject.elements[$i].onchange = function(){
            getValue();
        };
    }
}
function getValue() {
    document.getElementById( "sampleOutputName" ).innerHTML = document.getElementById( "sampleForm" ).elements[0].value;
    document.getElementById( "sampleOutputArea" ).innerHTML = document.getElementById( "sampleForm" ).elements[1].value;
}
</script>

HTML

<form id="sampleForm">
    【入力欄】
    <br />
    名前:<input type="text" value="太郎">
    <br />
    地域:
        <select>
            <option selected>関東</option>
            <option>東海</option>
            <option>関西</option>
        </select>
    <br />
</form>
<p id="sampleOutput">
    【出力欄】
    <br />
    名前:<span id="sampleOutputName"></span>
    <br />
    地域:<span id="sampleOutputArea"></span>
</p>

CSS

<style>
#sampleForm,
#sampleOutput {
    width: 500px;
    margin: 10px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}
#sampleForm * {
    margin: 0;
}
</style>

スポンサード リンク

カテゴリー: DOM, Formオブジェクト, JavaScript, コレクション, リファレンス パーマリンク