INPUTで入力された値やSELECTで選択された値の取得

解決済

質問者：from2001
質問日時：2007/04/18 17:01
回答数：2件

以下のようなHTMLで出力されるページにおいて入力された値を取得したいと思っております。

<div id="div1">
現在<input type="text" name="TXT1" id="TXT1" size="10">が入力されています。
<br>
現在<select size="1" name="SLCT1" id="SLCT1">
<option>項目1</option>
<option>項目２</option>
<option>項目３</option>
</select>が選択されています。
</div>

値を取得するには
v1 = document.getElementById("TXT1").value
で取得できるのはわかっているのですが

たとえば、TXT1に「文字列１」を入力し、SLCT1で「項目２」を選択している状態で、

"現在文字列１が入力されています。現在項目２が選択されています。" のようにDIV1の中に表示されている文字列全体を取得することはできるのでしょうか。

IEでinnerTEXT、FirefoxでtextContentを利用して取得を試みたのですが、うまくいきません。
何かいい方法があればご教授願えますでしょうか。

現在想定している状況ですと、DIVの中に配置されるINPUTやSELECTの数なども不定でして、それら要素のidも不定であります。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#30818
回答日時：2007/04/18 18:03

divの子供ノードを取ってnodeValue != nullならnodeValue。

nodeValue == nullでそのノードのnodeNameがbr以外の時valueを参照し順番に足し算したら如何でしょうか。

記憶が曖昧ですがDOMにはchildrenがありますが、ELEMENT NODEしか取れないかもしれません。
もしそうなら下の方法でTEXT NODEも取れるようにすれば良いですね。

children(document.getElementById("div1"))
function children(e){
var childern = []
var o = e.childNodes
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){ children.push(o[i]) }
}
return childern
}

そうするとchildernには
childern[0].nodeName #text
childern[0].nodeValue 空白
実際の文字 \n

childern[1].nodeName #text
childern[1].nodeValue 現在
実際の文字現在

childern[2].nodeName input(IEでは大文字で返しFirefoxでは小文字で返すと思いますのでnodeNameを比較する時はtoLowerCase()などで小文字か大文字に変えて比較すると良いかも知れません）
childern[2].nodeValue null
childern[2].value 入力された文字

childern[3] nodeName #text nodeValue が入力されています。実際の文字が入力されています。
childern[4] nodeName br nodeValue null
childern[5] nodeName #text nodeValue 空白実際の文字 \n
childern[6] nodeName #text nodeValue 現在実際の文字現在
childern[7] nodeName select nodeValue null value 選択されている項目のvalue値

こんな感じになると思います。
\n,\r,\tはブラウザによって無視する場合も有りますが空白なので気にする必要はないと思います。

この回答への補足

早速のご回答ありがとうございます。
k506d467様のコードを差し込んでみました。しかし、思ったような結果が得られません。

childrenですがFirefoxでは3つ、IEでは1つしか取得できませんでした。なにかお気づきの点があれば、ご指摘いただければ幸いです。

コードを差し込んだ全HTMLをペーストいたします。(一部k506d467様のコードを改変しています)

<html><head>
<title>文字列取得テスト</title>
<script>
function getChildren(e){
var children = [];
var o = e.childNodes;
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){
children.push(o[i]);
alert(o[i].nodeName + "," + o[i].nodeValue); //値をalertで出力
}
}
return children;
}
</script>
</head>

<body>

<div id="div1">
<p>現在<select size="1" name="SELECTTAG">
<option>項目1</option>
<option>項目２</option>
<option>項目３</option>
</select>が選択されています。</p>
</div>

<br><br><a href="#" onclick="getChildren(document.getElementById('div1'));">getChildren</a>

</body>
</html>

補足日時：2007/04/18 18:56

通報する

- 0
- 件

通報する

この回答へのお礼

すいません。
div1タグの中に間違ったものを貼り付けてしまっていました。

divの中の値を差し替えたのですが、どちらにしても、入力されたデータや、選択中の項目の内容はそのままでは取得することができませんでした。

ただ、nodeの要素をさらに解析すれば、入力されている値や、選択中の値を取得できるように思います。

指定したDIV要素の中のnodeを再帰的に調べていき、その中のINPUTやSELECTは入力されていたり、選択されている値を取得するようにしたいと思います。

ありがとうございました。

通報する

お礼日時：2007/04/18 19:12

No.1

回答者： VCAT
回答日時：2007/04/18 18:01

エレメントをdivタグで囲んでいる意図がいまいちよくわかりま

せんが、普通こういう場合は、ＦＯＲＭを使いますね。
だいいち、
v1 = document.getElementById("TXT1").value
はIE4では取得できませんし。

この回答への補足

ご回答ありがとうございます。

divで囲んでいるのは、INPUTタグ、SELECT以外のdivの中に存在する要素もJavascriptで取得したいと思っているからです。

FORMタグでは、INPUTタグ、SELECT以外の要素を送信することができないため、質問させていただいております。

補足日時：2007/04/18 19:02

通報する

- 0
- 件

通報する

この回答へのお礼

皆様のアドバイスを元に関数を作りました。ありがとうございました。
バグ発見時の改良などは下記URLの私のブログにUPする予定です。
http://www.kabugraph.jp/blog/from2001/d/217

//##################################################################################
//innerTEXTやtextContentのようにオブジェクトの中に含まれる文字列を取得します。
//INPUTタグやSELECTタグも考慮して値を取得することが可能です。
//引数：取得したい要素（document.getElementById("id")のようにオブジェクトを指定してください。）
//戻り値：文字列
//##################################################################################
function innerTextEx(e){
var childrenStrings = [];
var tmp1;
var o = e.childNodes;
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){

//alert(o[i].nodeName + "," + o[i].nodeValue);

if(o[i].nodeName == "#text" ){
//テキストなら
childrenStrings.push(o[i].nodeValue);
}else{
//その他のオブジェクトなら
//alert(o[i].nodeName + " " + o[i].type + " " + o[i].value);
switch(o[i].nodeName.toUpperCase()){
case "INPUT":
switch(o[i].type.toUpperCase()){
case "TEXT":
childrenStrings.push(o[i].value);
break;
case "CHECKBOX":
//無視
break;
case "RADIO":
//無視
break;
case "BUTTON":
childrenStrings.push(o[i].value);
break;
case "SUBMIT":
childrenStrings.push(o[i].value);
break;
case "HIDDEN":
//無視
break;
default:
break;
}
break;
case "TEXTAREA":
childrenStrings.push(o[i].value);
break;
case "SELECT":
childrenStrings.push(o[i].options[o[i].selectedIndex].text);
break;
default:
//要素の中を再帰処理
tmp1 = innerTextEx(o[i]);
childrenStrings.push(tmp1);
break;
}
}
}
}
return childrenStrings.join("");
}