iPentec.com  /  Document  /  カテゴリ: JavaScript  /  タグ:  JavaScript HTML テキストボックス

目次

JavaScriptでテキストボックスに入力された値を取得する

javaScriptでテキストボックスに入力された値を取得する方法を紹介します。

テキストボックスのid属性の値から取得する場合

書式

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

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

記述例

  var TextValue = document.id_form1.id_textBox1.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>

解説

下記コードでフォームを用意します。
 <form name="form1" id="id_form1" action="">
 ...
 </form>

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

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

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

実行結果

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


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


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

テキストボックスのname属性の値から取得する場合

書式

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

テキストボックスの値を参照する場合は下記の書式で参照できます。
document.forms.(参照するフォームのname).(参照するテキストボックスのname).value
または
document.(参照するフォームのname).(参照するテキストボックスのname).value

記述例

  var TextValue = document.forms.form1.textBox1.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>
補足
getElementsByName() を利用した場合は同じNameを持つ複数の要素が配列で取得されます。今回の例ではページのNameで"textBox1"を持つテキストボックスは1つしかないため、[0]番目の要素に対して値の取得をしています。

コード例: 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() {
        input = document.getElementById("textBox1").value;
        target = document.getElementById("output");
        target.innerHTML = input;
      }
    </script>
</head>
<body>
  <input id="textBox1" name="n_textBox1" type="text" value="" />
  <input type="button" value="Exec" onclick="onButtonClick();" />
  <hr/>
  <div id="output"></div>
</body>
</html>

実行結果

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


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


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

このページのキーワード
  • JSでテキストボックスに入力された値を取得する
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2011-06-16
改訂日: 2023-12-25

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
iPentecについて
プライバシー
お問い合わせ
Copyright © iPentec all rights reserverd.