こんな場合はこの記事を見てね!
そのものずばり!の内容じゃなくてもヒントになるはずです♪
ファイルをアップロードしようと思ったら「アクセスが拒否されました」
ウインドウをリサイズ、移動しようとしたら「アクセスが拒否されました」
form部品の初期値を取得したい、初期値に戻したい
form部品すべてにアクセスしたい
配列の値を削除したい
配列の値を並び替えたい
javascriptでtry-catch!
IEでclass名を取得したい
IEでonclick属性をセットしたい

2006年11月17日

form部品は数によって処理を分岐する

チェックボックスのチェックされている数を数えたり、テキストボックスの入力チェックをしたりとform elementの入力チェックではJavascriptを良く使います。
そして、JSPなどで行を自動生成するパターンだと、同名の部品数が可変になったりして、チェックはさらにややこしくなります。

たとえば、
あいうえお

こんな表があるとします。
でも
あいうえお
かきくけこ

になる可能性もあります。可変だからです。

<form name="myform">
<table>
<tbody>
<tr><td><input type="checkbox" name="check0">あいうえお</td></tr>
<tr><td><input type="checkbox" name="check1">かきくけこ</td></tr>
</tbody>
</table>
</form>

チェックされている個数を調べるのに
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.elements.length;
 for(var i = 0; i < len; i++){
  if(obj.elements["check" + i].checked){
   count++;
  }
 }
}
なんてやりたくなりますよね?
でもこれは使えません。なぜなら、form部品のlengthは1個のときは取得できないからです。
なので、今回はform.elements.lengthにしましたが、1個である場合と、それ以上ある場合の場合わけが必要になります。

上の例だと
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.elements.length;
 if(len > 1){
  for(var i = 0; i < len; i++){
   if(obj.elements["check" + i].checked){
    count++;
   }
  }
 }else{
  if(obj.elements["check" + 0].checked){
   count++;
  }
 }
}
こんな風にlengthが1より大きいかどうかで判断します。
(もしくはif(len){というように存在するかどうかで判断。)
if(len== 1){
なんて風にはできません。

チェックボックスの名前がたとえばすべて同じだった場合も同様に場合わけが必要です。
function checkCnt(){
 var count = 0;
 var obj = document.myform;
 var len = obj.check.length;
 if(len > 1){
  for(var i = 0; i < len; i++){
   if(obj.elements["check"][i].checked){
    count++;
   }
  }
 }else{
  if(obj.elements["check"].checked){
   count++;
  }
 }
}
同名のelementの場合
form名.element名[何番目]でアクセスできますが、これは2個以上ある場合のみで、1個の場合はform名.element名でしかアクセスできません。
一個でもform名.element名[0]ってついやりたくなっちゃいますよね〜。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 11:31 | Comment(0) | TrackBack(0) | Form Elements

2006年11月07日

javascript デバッガ

javascriptのデバッグってどうしてますか?
そんなに複雑なプログラムを組むわけじゃないのでalertでいちいち変数を表示するという方法でもあまり困らないと思うのですが、DOMだったりAjaxにtryし始めるとやっぱりデバッガがほしいなあと思います。

もともとFireFoxのプラグインである、Venkmanを使用していました。
Venkman早わかりを読めばたいていわかると思いますが、ステップ実行、変数の値をウォッチなど、たいていの機能が盛り込まれ、eclipseなどに慣れた方にはユーザーインターフェイスも使い勝手がよくできています。
homepageおよびダウンロード



新しく試してみたのが同じくFireFoxのプラグインであるFirebug。
機能はVenkmanとほぼ同じですが、シンプルなインターフェースでとても見やすいです。
こちらのほうがより直感的な気がします。DOMを扱うなら絶対これお勧めです。
homepageおよびダウンロード


ぜひ試してみてくださいね。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 14:57 | Comment(0) | TrackBack(0) | javascript デバッガ
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。