[JavaScript] テキストボックスの値を取得する

このページのタグ:[JavaScript]
JavaScriptでテキストボックスの値を取得する方法を紹介します。

id属性で指定する場合

JavaScriptでフォームのコントロールをidから参照する場合は
document.forms.(参照するフォームのid).(参照するコントロールのid)
または
document.(参照するフォームのid).(参照するコントロールのid)
と記述します。

テキストボックスの値をidで参照する場合は
document.forms.(参照するフォームのid).(参照するテキストボックスのid).value
または
document.(参照するフォームのid).(参照するテキストボックスのid).value
とします。

コード例


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript" language="javascript">
        function onButtonClick() {
          target = document.getElementById("output");
          target.innerText = document.forms.id_form1.id_textBox1.value;
          //target.innerText = document.id_form1.id_textBox1.value;//これでもOK
        }
  </script>

</head>
<body>
  <form name="form1" id="id_form1" action="">
    <input name="textBox1" id="id_textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <hr/>
  <div id="output"></div>

</body>
</html>

解説


 <script type="text/javascript" language="javascript">
     function onButtonClick() {
          target = document.getElementById("output");
          target.innerText = document.forms.id_form1.id_textBox1.value;
     }
 </script>
がボタンがクリックされた際に実行するJavaScriptの関数になります。関数の処理はidに"output"であるタグ要素を取得し、開始タグと終了タグの間にテキストボックスに入力された文字を挿入します。
ボタンクリック時のJavaScriptの実行についての詳細は「[JavaScript] ボタンのクリック時にJavaScriptを実行する - ボタンのonClickイベントの実装」の記事を参照してください。


 <form name="form1" id="id_form1" action="">
 ...
 </form>
にてフォームを用意します。


 <input name="textBox1" id="id_textBox1" type="text" value="" />
がテキストボックスになります。JavaScriptから参照できるようにname属性,id属性を設定します。


 <input type="button" value="Exec" onclick="onButtonClick();" />
がボタンになります。ボタンのonclickにonButtonClick()関数を記述し、ボタンがクリックされたらonButtonClick()関数を実行する動作にします。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


テキストボックスに文字列を入力し、[Exec]ボタンをクリックします。


下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。

name属性で指定する場合

JavaScriptでフォームのコントロールをnameから参照する場合は
document.forms.(参照するフォームのname).(参照するコントロールのname)
または
document.(参照するフォームのname).(参照するコントロールのname)
と記述します。

テキストボックスの値を参照する場合は
document.forms.(参照するフォームのname).(参照するテキストボックスのname).value
または
document.(参照するフォームのname).(参照するテキストボックスのname).value
とします。

コード例


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript" language="javascript">
        function onButtonClick() {
          target = document.getElementById("output");
          target.innerText = document.forms.form1.textBox1.value;
          //target.innerText = document.form1.textBox1.value;//これでもOK
        }
  </script>
</head>
<body>
  <form name="form1" action="">
    <input name="textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <hr />
  <div id="output"></div>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


テキストボックスに文字列を入力し、[Exec]ボタンをクリックします。


下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。

補足:id,nameが混在する場合

id, nameが混在した場合でも動作します。
document.forms.(参照するフォームのid).(参照するテキストボックスのname).value
document.forms.(参照するフォームのname).(参照するテキストボックスのid).value
と記述しても動作します。

DOMを利用して取得する場合 (getElementById, getElementsByNameの利用)

DOMを利用してテキストボックスにアクセスすることもできます。getElementByIdやgetElementsByNameを呼び出してテキストボックスのオブジェクトを取得します。テキストボックスに入力された値はvalueプロパティに格納されています。getElementByIdやgetElementsByNameを利用する場合はテキストボックスのinputタグがformタグ内に存在しなくても値を取得できます。

コード例: getElementById() を利用


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
          function onButtonClick() {
            target = document.getElementById("output");
            /*getElementById 利用*/
            textBox = document.getElementById("id_textBox1");
            target.innerText = textBox.value;
          }
    </script>
</head>
<body>
  <form name="form1" id="id_form1" action="">
    <input name="textBox1" id="id_textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <hr />
  <div id="output"></div>
</body>
</html>

コード例: getElementsByName() を利用


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
          function onButtonClick() {
            target = document.getElementById("output");
            /*getElementsByName 利用*/
            textBox = document.getElementsByName("textBox1");
            target.innerText = textBox[0].value;
          }
    </script>
</head>
<body>
  <form name="form1" id="id_form1" action="">
    <input name="textBox1" id="id_textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <hr />
  <div id="output"></div>
</body>
</html>

コード例: getElementById() を利用 Formタグのない例

inputタグがFormタグ内に含まれない場合でも動作します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
          function onButtonClick() {
            target = document.getElementById("output");
            /*getElementById 利用*/
            textBox = document.getElementById("id_textBox1");
            target.innerText = textBox.value;
          }
    </script>
</head>
<body>
  <input name="textBox1" id="id_textBox1" type="text" value="" />
  <input type="button" value="Exec" onclick="onButtonClick();" />
  <hr />
  <div id="output"></div>
</body>
</html>

補足

getElementsByName() を利用した場合は同じNameを持つ複数の要素が配列で取得されるため、今回の例ではページのNameで"textBox1"を持つテキストボックスは1つしかないため、[0]番目の要素に対して値の取得をしています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


テキストボックスに文字列を入力し、[Exec]ボタンをクリックします。


下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)