フォームに値をセット | JavaScript

初版2008/09/25：最終更新日2013/01/11

フォームに値をセット

フォームのテキストなどに動的に値をセットすることが出来ます。
まずフォームの部品にid属性を指定します。この属性はHTMLファイル内で一意でないといけません。
例えば以下のように指定します。

<input type="text" id="age">

このフォーム部品にアクセスするにはdocument.getElementById("age")を使用します。
getElementByIdの引数に操作したいフォーム部品のid属性を指定します。上記例の場合、ageです。
document.getElementById("age").valueとすると現在入力されている値を取得することが出来ます。
逆にこの値にセットすることによりフォーム部品に値をセットすることが出来ます。
以下、例です。

サンプルソース

<html>
<head>
<title></title>
<script type="text/javascript"><!--
    function a(){
        if(document.getElementById("SELECT").value == "WIN"){
            document.getElementById("text").value = "ウィンドウズ";
        }else if(document.getElementById("SELECT").value == "MAC"){
            document.getElementById("text").value = "マック";
        }else if(document.getElementById("SELECT").value == "UNIX"){
            document.getElementById("text").value = "ユニックス";
        }else{
            document.getElementById("text").value = "";
        }
    }
--></script>
</head>
<body>
<select name="OS" id="SELECT" onChange="a()">
<option value="">
<option value="WIN">Windows
<option value="MAC">Macintosh
<option value="UNIX">UNIX
</select>
<input type="text" id="text">
</body>
</html>

Information