- - PR -
DOMを用いたテキストフィールドの値の取得について
1
投稿者 | 投稿内容 | ||||||||
---|---|---|---|---|---|---|---|---|---|
|
投稿日時: 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> | ||||||||
|
投稿日時: 2006-04-05 07:34
他の関数で使っているように、node を追いかけるか ID 属性の値で取得します。 (ということは、他の関数部分はご自分で作られたものでないのでしょうか?) 今回ですと指定された TD 要素内の node を追いかけることになるでしょう。 TD を特定するために、ID なりを示す引数が必要になると思うのですが... _________________ C# と VB.NET の入門サイト じゃんぬねっと日誌 | ||||||||
|
投稿日時: 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 ] | ||||||||
|
投稿日時: 2006-04-22 03:38
とうの昔に解決しているようですが、つい最近、IEにて、以下のコードで name 属性が上手く設定出来ないという事にはまりましたので、その解決方法を記載しておきます。
.... IEの場合、DOMでinputやselectのname属性を設定できないみたいなんですね... だから、
みたいに、document.createElement()時点でname属性を含んだタグを書かなければいけないんです.... (ふざけんな!) | ||||||||
|
投稿日時: 2006-04-22 05:33
IE7 で直っていることを祈りましょう。(;^-^) _________________ C# と VB.NET の入門サイト じゃんぬねっと日誌 |
1