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を実行する (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]ボタンをクリックします。
下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。
このページのキーワード
- JavaScript テキストボックス
- JavaScript テキストボックス 取得
- テキストボックス 値 取得
- テキストボックス 文字列 取得
- HTML テキストボックス 入力文字
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-12-25
改訂日: 2023-12-25
作成日: 2011-06-16
