JavaScriptでテキストボックスの値を設定するコードを紹介します。
テキストボックスのid属性の値を利用して設定する場合
書式
JavaScriptでフォームのコントロールをidから参照する場合は次の書式で参照できます。
document.forms.(参照するフォームのid).(参照するコントロールのid)
または
document.(参照するフォームのid).(参照するコントロールのid)
テキストボックスの値をidで参照する場合は次の書式で参照できます。
document.forms.(参照するフォームのid).(参照するテキストボックスのid).value
または
document.(参照するフォームのid).(参照するテキストボックスのid).value
コード
下記の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() {
document.forms.id_form1.id_textBox1.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>
</body>
</html>
解説
inputボタンのクリック時に、onclick属性に設定された、
onButtonClick() 関数を呼び出す動作になります。
<input type="button" value="Exec" onclick="onButtonClick();" />
onButtonClick() 関数では、idがid_textBox1であるテキストボックスに「ぺんぎんクッキー」の文字列を設定します。
function onButtonClick() {
document.forms.id_form1.id_textBox1.value = "ぺんぎんクッキー";
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]ボタンをクリックします。クリックするとテキストボックスに "ぺんぎんクッキー" の文字列が設定されます。
テキストボックスのname属性の値を利用して設定する場合
書式
JavaScriptでフォームのコントロールをnameから参照する場合は以下の書式を利用します。
document.forms.(参照するフォームのname).(参照するコントロールのname)
または
document.(参照するフォームのname).(参照するコントロールのname)
テキストボックスの値を参照する場合はは以下の書式を利用します。
document.forms.(参照するフォームのname).(参照するテキストボックスのname).value
または
document.(参照するフォームのname).(参照するテキストボックスのname).value
コード
下記の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() {
document.forms.form1.textBox1.value = "らくだキャラメル";
//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>
</body>
</html>
解説
inputボタンのクリック時に、onclick属性に設定された、
onButtonClick() 関数を呼び出す動作になります。
<input type="button" value="Exec" onclick="onButtonClick();" />
onButtonClick() 関数では、name属性に、textBox1を持つテキストボックスに対して「ぺんぎんクッキー」の文字列を設定します。
function onButtonClick() {
document.forms.form1.textBox1.value = "らくだキャラメル";
}
補足:id,nameが混在する場合
id, nameが混在した場合でも動作します。
document.forms.(参照するフォームのid).(参照するテキストボックスのname).value
document.forms.(参照するフォームのname).(参照するテキストボックスのid).value
と記述しても動作します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]ボタンをクリックします。テキストボックスに「らくだらくだキャラメル」の文字列が設定されます。
DOMを利用して設定する場合 (getElementById, getElementsByNameを利用)
コード: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() {
/* getElementById を利用 */
document.getElementById("textBox1").value="ぺんぎんクッキー";
}
</script>
</head>
<body>
<form name="form1" action="">
<input id="textBox1" name="n_textBox1" type="text" value="" />
<input type="button" value="Exec" onclick="onButtonClick();" />
</form>
</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() {
/* getElementsByName を利用 */
var elements = document.getElementsByName("n_textBox1");
elements[0].value = "ぺんぎんクッキー";
}
</script>
</head>
<body>
<form name="form1" action="">
<input id="textBox1" name="n_textBox1" type="text" value="" />
<input type="button" value="Exec" onclick="onButtonClick();" />
</form>
</body>
</html>
コード: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() {
document.getElementById("textBox1").value = "ぺんぎんクッキー";
}
</script>
</head>
<body>
<input id="textBox1" name="n_textBox1" type="text" value="" />
<input type="button" value="Exec" onclick="onButtonClick();" />
</body>
</html>
解説
inputボタンのクリック時に、onclick属性に設定された、
onButtonClick() 関数を呼び出す動作になります。
<input type="button" value="Exec" onclick="onButtonClick();" />
onButtonClick() 関数ではgetElementById() メソッドを呼び出し、textBox1 のIDを持つ要素を取得します。取得した要素のvalueプロパティに設定したい値を代入しています。
function onButtonClick() {
document.getElementById("textBox1").value = "ぺんぎんクッキー";
}
補足
getElementsByName() を利用した場合は同じNameを持つ複数の要素が配列で取得されます。今回の例ではページのNameで"textBox1"を持つテキストボックスは1つしかないため、[0]番目の要素に対して値の設定をしています。a
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]ボタンをクリックします。クリックするとテキストボックスに "ぺんぎんクッキー" の文字列が設定されます。
このページのキーワード
- JSでテキストボックスの文字列を設定する
- JavaScript
- HTML
- テキストボックス
- テキストボックスに文字列を設定
- テキストボックスに値を設定
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-12-25
改訂日: 2023-12-25
作成日: 2019-03-03
