- PR -

DOMを用いたテキストフィールドの値の取得について

1
投稿者投稿内容
Masayuki2501
常連さん
会議室デビュー日: 2006/01/02
投稿数: 25
投稿日時: 2006-04-04 22:34
こんばんは。

DOMを用いてテーブルのTD要素の中に、テキストフィールドを記載しいます。
その後、sendData関数で値を取得したいのですが、
単純に、フォーム名.テーブル名.valueの形式では取得できません。

どのように、取得したらよいのか、ご存知の方、よろしくお願いします。

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
mytable="";
mytablebody="";
num=0;

function removeChild() {
var myTB=document.getElementById("myTable");
for (var i = myTB.rows.length-1; i >= 0; i--) {
myTB.removeChild(myTB.rows[i]);
}
myTB.parentNode.removeChild(myTB);
}


function makeTable(obj) {
if (num != 0) {
removeChild();
} else {
num=1;
}
var tbNum = document.f1.tableNum.value;
var mybody=document.getElementById("createTBL");
mytable = document.createElement("TABLE");
mytablebody = document.createElement("TBODY");
mytablebody.setAttribute("id", "myTable");

// 行
for(j=0;j<tbNum;j++) {
// tr要素
mycurrent_tr=document.createElement("TR");

// 列
for(i=0;i<1;i++) {

// th要素
var tmpText=document.createTextNode("文言" + (j+1) + "番 ");
// th要素に付加
mycurrent_th=document.createElement("TH");
mycurrent_th.appendChild(tmpText);

// td要素
var inputQuestion = document.createElement("input");
inputQuestion.type="text";
inputQuestion.name="inputQuestion_" + j;
inputQuestion.value="";
inputQuestion.size="50";
// td要素に付加
mycurrent_td=document.createElement("TD");
mycurrent_td.appendChild(inputQuestion);

// tr要素に付加
mycurrent_tr.appendChild(mycurrent_th);
mycurrent_tr.appendChild(mycurrent_td);
}

mytablebody.appendChild(mycurrent_tr);
}

mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border", "1");

var myTB=document.getElementById("myTable");
}


function sendData() {
var questionNum = document.f1.tableNum.value; // 選択肢数
alert("質問数:" + questionNum);

var questionSelectData = new Array(questionNum); // 選択肢の文言
for (var i = 0; i < questionSelectData.length; i++) {
var tmp = "document.f1.inputQuestion_" + i;
questionSelectData[i] = eval(tmp); // ← これでは取得できない
}
}
// -->
</script>
</head>

<body>

<form name="f1">


<table name="select_tbl">
<tr>
<th>テーブルの数を選んでください。</th>
</tr>

<tr>
<td>
<select name="tableNum">
<option value="0" selected="selected">選択肢の項目数を選択してください。</option>
<option value="2" >2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" name="setCookieBtn" value="生成" onClick="return makeTable();" />
</td>
</tr>
</table>

<br><br>

<b>文言を入力してください。</b><br>

<div id="createTBL"></div>

<br><br>

<input type="button" name="submit" value="送信" onClick="return sendData();" />

</form>

</body>
</html>


じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-04-05 07:34
引用:

Masayuki2501さんの書き込み (2006-04-04 22:34) より:

DOMを用いてテーブルのTD要素の中に、テキストフィールドを記載しいます。
その後、sendData関数で値を取得したいのですが、
単純に、フォーム名.テーブル名.valueの形式では取得できません。


他の関数で使っているように、node を追いかけるか ID 属性の値で取得します。
(ということは、他の関数部分はご自分で作られたものでないのでしょうか?)

今回ですと指定された TD 要素内の node を追いかけることになるでしょう。
TD を特定するために、ID なりを示す引数が必要になると思うのですが...

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
87
会議室デビュー日: 2005/06/17
投稿数: 13
投稿日時: 2006-04-05 10:27
はじめまして。
ちょっと暇だったのでコードを試してみました。

makeTable関数で作成されたHTMLをsendData関数内で確認してみました。
INPUT要素のname属性が入っていないようでした。

makeTable関数でINPUT要素を作成している時にはname属性の値を参照出来ますが、
TD要素にappendChildした後は、
[編集]
出力HTML(innerHTML)としては無くなっているように見えます。
(オブジェクトにはname属性が存在し、参照出来ます。)
[/編集]

#何故だか理由はわかりませんが…。

その為、「"document.f1.inputQuestion_" + i」を参照出来ないようです。

ちなみに、makeTable関数で作成しようとしているHTML(name属性有り)を
直書きすれば、sendData関数でObjectが取得出来ています。

[追記]
また、makeTable関数でname属性の代わりにID属性を設定すると
sendData関数でObjectが取得出来るようです。
[/追記]

ご参考になるかわかりませんが・・・。


[ メッセージ編集済み 編集者: 87 編集日時 2006-04-05 11:05 ]
ina
ベテラン
会議室デビュー日: 2005/04/14
投稿数: 58
投稿日時: 2006-04-22 03:38
とうの昔に解決しているようですが、つい最近、IEにて、以下のコードで name 属性が上手く設定出来ないという事にはまりましたので、その解決方法を記載しておきます。
コード:
inputTag = document.createElement('input');
inputTag .name='aa';


....
IEの場合、DOMでinputやselectのname属性を設定できないみたいなんですね...
だから、
コード:
inputTag = document.createElement('<input name="aa">');


みたいに、document.createElement()時点でname属性を含んだタグを書かなければいけないんです....
(ふざけんな!)
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-04-22 05:33
引用:

inaさんの書き込み (2006-04-22 03:38) より:

(ふざけんな!)


IE7 で直っていることを祈りましょう。(;^-^)

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
1

スキルアップ/キャリアアップ(JOB@IT)