JavaScript テキストボックスの値を取得/設定するサンプル

JavaScriptのテキストボックスの値を取得/設定するサンプルです。

コード

以下の4つのサンプルがあります。

No 説明
値を設定
10行目は、フォームのname「form1」とテキストボックスのname「color1」で対象を特定(30行目)しvalueに値を設定しています。
値を取得
13行目は、フォームのname「form1」とテキストボックスのname「color1」で対象を特定(30行目)しvalueの値を取得しています。
値を設定
19行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(30行目)しvalueに値を設定しています。
値を取得
22行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(30行目)しvalueの値を取得しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テキストボックスのサンプル</title>
<script>
function btn1_click(){
	var str ="";
	// No.1 値を設定
	document.form1.color1.value = "blue";

	// No.2 値を取得
	str = document.form1.color1.value;
	document.getElementById("sp1").innerHTML = str;
}
function btn2_click(){
	var str ="";
	// No.3 getElementByIdメソッドで値を設定
	document.getElementById("tx1").value = "green";

	// No.4 getElementByIdメソッドで値を取得
	str = document.getElementById("tx1").value;
	document.getElementById("sp1").innerHTML = str;
}
</script>
</head>
<body >
<p>色 <span id="sp1"></span></p>
<form name="form1">
<input type="text" name="color1" value="red" id="tx1" maxlength="5"><br />
<input type="button" value="ボタン1" onclick="btn1_click()"><br />
<input type="button" value="ボタン2" onclick="btn2_click()">
</form>
</body>
</html>

サンプル

上記コードのサンプルです。 
ボタン1を押すと、テキストボックスに値(blue)をセットして表示します。
ボタン2を押すと、テキストボックスに値(green)をセットして表示します。



関連の記事

JavaScript ラジオボタンの選択されている値を取得するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定するサンプル
JavaScript チェックボックスの値を取得/設定するサンプル
JavaScript テキストエリアの値を取得/設定するサンプル
jQuery テキストボックスの値を取得/設定するサンプル




△上に戻る