JavaScript - textarea（テキストエリア) の値を取得する value

JavaScript で textarea（テキストエリア) の値を取得する場合は、 value プロパティを利用します。

ここでは id 属性、name 属性、elements を利用して textarea（テキストエリア) の内容を取得する方法を説明します。

id 属性を利用して値を取得する

テキストエリアに id 属性がある場合は、 getElementById() メソッドを利用します。

次のようなテキストエリアのコードがあるとします。

「id=”area”」です。

<p><textarea id="area" rows="10" cols"20">サンプルテキスト</textarea></p>

この場合、テキストエリアの値を取得する JavaScript のコードは、 次のようになります。

var str = document.getElementById("area").value;

console.log(str); // サンプルテキスト

先に要素だけを取得して、後で value プロパティを参照する場合は次のようになります。

var area = document.getElementById("area");

console.log(area.value); // サンプルテキスト

name 属性を利用してテキストエリアの値を取得する

name 属性がある場合は次のようにテキストエリアの値を取得できます。

document.フォームのname.テキストエリアのname.value

同じ name のテキストエリアが複数ある場合は次のように取得します。

document.フォームのname.テキストエリアのname[].value

では具体的に見ていきます。

フォーム部分のコードは次のようになっています。

フォームの name が “form0″、テキストエリアの name が “area”。

同じ name のテキストエリアが複数あります。

<form name="form0">
	
	<p><textarea name="area" rows="5" cols"20">テキストエリア0</textarea></p>
	<p><textarea name="area" rows="5" cols"20">テキストエリア1</textarea></p>
	
</form>

2つのテキストエリアのうち、 上のテキストエリアの値を取得する場合、 次のコードとなります。

var str = document.form0.area[0].value;

console.log(str); // テキストエリア0

下のテキストエリアの値を取得する場合、 次のコードとなります。

var str = document.form0.area[1].value;

console.log(str); // テキストエリア1

id 属性も name 属性もない場合は？

テキストエリアに id 属性も name 属性もない場合は、 elementsを使って次のように記述します。

document.フォームのname.elements[].value

フォーム部分のHTML

<form name="form0">
	
	<p><textarea rows="5" cols"20">テキストエリア0</textarea></p>
	<p><textarea rows="5" cols"20">テキストエリア1</textarea></p>
	
</form>

上のテキストエリアの値を取得するコードは、 次のようになります。

var str = document.form0.elements[0].value;

console.log(str); // テキストエリア0

まとめ

★ テキストエリアの値を取得する方法は複数あります。

★ 一番シンプルなのが id 属性で取得する方法です。

★ それ以外だと、フォーム部品の追加や削除があった場合、 JavaScriptコードも変更することになります。