javaScriptでテキストボックスに入力された値を取得する方法を紹介します。
JavaScriptでフォームのコントロールをidから参照する場合は下記の書式で参照できます。
または
テキストボックスの値をidで参照する場合は、下記の書式で参照できます。
または
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]ボタンをクリックします。
下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。
JavaScriptでフォームのコントロールをnameから参照する場合は下記の書式で参照できます。
または
テキストボックスの値を参照する場合は下記の書式で参照できます。
または
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が混在した場合でも動作します。
と記述しても動作します。
DOMを利用してテキストボックスにアクセスすることもできます。getElementByIdやgetElementsByNameを呼び出してテキストボックスのオブジェクトを取得します。テキストボックスに入力された値はvalueプロパティに格納されています。getElementByIdやgetElementsByNameを利用する場合はテキストボックスの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>
<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>
<!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>
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]ボタンをクリックします。
下部のエリアに入力したテキストが表示されました。テキストボックスの値が取得できていることがわかります。
