JavaScriptでテキストボックスの値を設定するコードを紹介します。
JavaScriptでフォームのコントロールをidから参照する場合は次の書式で参照できます。
または
テキストボックスの値をidで参照する場合は次の書式で参照できます。
または
下記の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]ボタンをクリックします。クリックするとテキストボックスに "ぺんぎんクッキー" の文字列が設定されます。
JavaScriptでフォームのコントロールをnameから参照する場合は以下の書式を利用します。
または
テキストボックスの値を参照する場合はは以下の書式を利用します。
または
下記の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が混在した場合でも動作します。
と記述しても動作します。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]ボタンをクリックします。テキストボックスに「らくだらくだキャラメル」の文字列が設定されます。
<!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>
<!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>
<!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]ボタンをクリックします。クリックするとテキストボックスに "ぺんぎんクッキー" の文字列が設定されます。
