実験中、の続き。
先日のクッキーとValidなStrict HTMLは、動くという点ではちゃんと動いているが、よろしくない点が2つある。ひとつは、表示にDOMを利用しているわりに、Cookie入出力では古いスクリプトをそのまま使っている点。前方互換性的にあまりよくないかも。もうひとつは、DOMが利用できない環境でも、Remember Info?が出てしまう点。どうせなら、そこもDOMを利用して出力すれば、DOM利用可能→記憶するかどうか選べる、DOM利用不可能→そもそもRemember Info?もでてこない、になって便利なのに。
んで、とりあえず、後者の実験だけしようとして失敗、というのが今日の話題。ソースを晒してみる。
HTML(テンプレートではなく)のほうが
<form method="post" action="http://adp.daa.jp/cgi/mt/mt-comments.cgi" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<p><input type="hidden" name="static" value="1" /><input type="hidden" name="entry_id" value="83" /></p>
<dl>
<dt><label for="author">Name</label>: </dt>
<dd><input id="author" name="author" size="30" tabindex="1" value="" /></dd>
<dt><label for="email">Email Address</label>: </dt>
<dd><input id="email" name="email" size="30" tabindex="2" value="" /></dd>
<dt><label for="url">URL</label>: </dt>
<dd><input id="url" name="url" size="30" tabindex="3" value="" /></dd>
<dt id="remember"><input type="hidden" name="bakecookie" value="Forget Info" /></dt>
<dt><label for="comments">Comments</label>: </dt>
<dd><textarea id="comments" name="text" rows="7" cols="50" tabindex="4"></textarea></dd>
<dt><input id="button-post" type="submit" name="post" value="Post" title="投稿" /></dt>
</dl>
</form>
<script type="text/javascript" src="individual_entry_comment.js"></script>
スクリプト(individual_entry_comment.js)のほうが
if (document.getElementById && document.createElement){
var r = document.getElementById('remember');
if (r.childNodes[0]) r.removeChild(r.childNodes[0]);
var r1 = document.createElement('label');
var r10 = document.createTextNode(' Yes');
var r11 = document.createElement('input');
r11.setAttribute('id','bakecookie');
r11.setAttribute('type','radio');
r11.setAttribute('name','bakecookie');
r1.appendChild(r10);
r1.appendChild(r11);
var r2 = document.createElement('label');
var r20 = document.createTextNode(' No');
var r21 = document.createElement('input');
r21.setAttribute('id','forget');
r21.setAttribute('type','radio');
r21.setAttribute('name','bakecookie');
r21.setAttribute('onclick','forgetMe(this.form)');
r21.setAttribute('value','Forget Info');
r2.appendChild(r20);
r2.appendChild(r21);
r.appendChild(document.createTextNode('Remember info?'));
r.appendChild(r1);
r.appendChild(r2);
document.getElementById('email').setAttribute('value',getCookie('mtcmtmail'));
document.getElementById('author').setAttribute('value',getCookie('mtcmtauth'));
document.getElementById('url').setAttribute('value',getCookie('mtcmthome'));
if (getCookie('mtcmtauth')) {
document.getElementById('bakecookie').setAttribute('checked','checked');
} else {
document.getElementById('forget').setAttribute('checked','checked');
}
}
長くてごめんなさい。これだと、それらしい表示は出来るのに、IE6でなぜかラジオボタンの選択が出来なくなる。formもJavaScriptも、ふだんいじらないので、ようわからん。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/84
document.writeでやればうまくいきそう。ここまできてむちゃくちゃかっこわるいが。
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/name_2.asp によると、"The NAME attribute cannot be set at run time on elements dynamically created with the createElement method."だそうです。例文ものってます。
ありがとうございます>Rekryさん。IE6の制約なのかもしれないってことですね。