- ベストアンサー
JavaScript内でエレメントを設定したいがPHPが間にある場合
html(phpファイル内)抜粋 textarea name='textRmks["+nextRow+"]' cols='100' rows='5'><?=$teststr;?></textarea> これをJavascript内でエレメントを使って設定したいのですが PHPの<?=$teststr;?>部分の書き方がわからずだいぶ悩んでます。 var ipt = fm.createElement("<textarea name='tRmk["+cnt+"]' cols='100' rows='5'><--ここ？-->"); どなたか教えてください。
- 9pinkapple
- お礼率30% (8/26)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
textareaを動的に作成したいってことかな？ 以下のソースを参考にしてください textareaオブジェクトのvalueに指定した値が中に表示されます。 他のフォームオブジェクトも基本的に同じです ※エレメントの参照方法とか値の設定方法がブラウザによって動作しない可能性があるので、各ブラウザ用の方法を探してみてください。 <html> <head> <title>textarea test</title> <script type="text/javascript"> onload = function() { var textarea = document.createElement('textarea'); textarea.setAttribute('id', 'textarea1') textarea.setAttribute('cols', '100') textarea.setAttribute('rows', '10') textarea.setAttribute('value', 'text text text text') document.form1.appendChild(textarea) } </script> </head> <body> <form name="form1" id="form1"></form> </body> </html>
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ipt=document.createElement('<textarea name="tRmk['+cnt+']">'); if(!ipt) ipt=document.createElement('textarea'); ipt.name='tRmk['+cnt+']'; ipt.cols='100'; ipt.rows='5'; ipt.value="<?=$teststr;?>"; //これ 未検証です。 やってることは他の人のsetAttribute()と同じです。 XHTMLにするならdocument.createElementNS()を使用。 厳密にはIEはcreateElementNS()未対応で、createElement()と同じ動作になります。 Content-Typeヘッダをtext/htmlにしてcreateElementNSかsetAttributeNSを使うと、IE6がフリーズ or クラッシュ nameをセットしないと、フォームを送信してもtextareaの内容が送信されません。 IEでname属性が付与できない問題があるので、name付きでcreateElementしてます。 どのタグでname属性が付いて、どのタグで付かないのかまではまだ調べていませんが、 もしかするとtextareaは"name属性を付けられる要素"かもしれません。
お礼
こちらも思いの動作をしました。 ２通りの書き方があるのですね。 同文になりますが、つたない文章から読み取って頂き ありがとうございました。助かりました。
- himajin100000
- ベストアンサー率54% (1660/3060)
●fm.createElement("<textarea name='tRmk["+cnt+"]' cols='100' rows='5'><--ここ？-->") という構文はDOM規格上存在しない。 IEが勝手に動作するだけ。 application/xhtml+xmlで配布し、IEの対応を切り捨てるなら 各条件分岐の2番目以降は必要ない。 その場合script要素のtype属性はtext/javascriptでなく， application/ecmascriptに書き換えるべきだろう。 ●サーバ側でPHPが解釈された後，クライアントにわたる(Ecmascriptで解釈)と考えよう。サーバで処理後の結果は「ソースを表示」で確認できる ============================================ <?php // header("Content-Type:application/xhtml+xml;charset=UTF-8"); header("Content-Type:text/html;charset=UTF-8"); $teststr = "Q3611556のテストだよ"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3611556 TestCase 1</title> <script type="text/javascript"> //<![CDATA[ function hoge(){ var returnvalue = false; var ipt = null; for (var cnt = 0;cnt < 5; cnt++ ){ if(typeof(document.createElementNS) != "undefined"){ ipt = document.createElementNS("http://www.w3.org/1999/xhtml","textarea"); }else if(typeof(document.createElement) != "undefined"){ ipt = document.createElement("textarea"); }else{ ipt = null; returnvalue = false; } if (ipt != null){ ipt.setAttribute("name","tRmk["+cnt+"]"); //あまり好きではないがPHPの動作上必要っぽいね。 ipt.setAttribute("cols","100"); ipt.setAttribute("rows","5"); if(typeof(ipt.textContent) != "undefined"){ ipt.textContent = "<?=$teststr;?>"; returnvalue = true; }else if(typeof(ipt.innerText) != "undefined"){ ipt.innerText = "<?=$teststr;?>"; returnvalue = true; }else{ returnvalue = false; } document.getElementById("Q3611556A").appendChild(ipt); } } } //]]> </script> </head> <body onload="hoge();"> <p id="Q3611556A"></p> </body> </html>
お礼
js内で、"<?=$teststr;?>"が反応してくれません。 書き方がまずいのか腑に落ちませんが 参考になりました。ありがとうございました。
お礼
できました。 つたない文章から読み取って頂きありがとうございました。 助かりました。