prog*sig

■9.0 Introduction

form要素はユーザーとデベロッパーを繋ぐものである。
Javascriptはform要素を改変することもできるが、JavaScriptは要素に取って代わるわけではなくそれらを高めるために使うべきだ。JavaScript enhances, not replaces.
JavaScriptをOFFにしてブラウジングしている人もいる。

これでできる！ クロスブラウザJavaScript入門：第13回　簡単なアプリケーションの作成｜gihyo.jp … 技術評論社
これのsubmit要素にイベントを付けることで、JavaScriptオフでも通常のsubmitで検索ができるような感じでJavaScriptオフでも使えるようにしておくべき。

■9.1 Accessing Form Text Input Values

inputのvalueを取得。

var formValue = document.forms["formname"].elements["elementname"].value;

documentオブジェクトはformオブジェクトのコレクションを持っているので、上のようにnameを使ってアクセスできる。
普通にidを振ってアクセスするのもあり。

var txtValue = document.getElementByid("pattern").value;

■9.2 Dynamically Disabling and Enabling Form Elements

form要素はdisabledプロパティを持っていてtrue,falseの指定ができる。

■9.3  Getting Information from a Form Element Based on an Event

form要素にはイベントを付けて、そのイベント時に要素見て処理を行う。
使えるイベントの要素ごと一覧。

Elements	Events
button, submit	click, keypress, focus, blur
checkbox	click, keypress
radiobutton	click, keypress
textarea	select, change, focus, blur, click, keypress, mousedown, mouseup, keydown, keyup
password, text	change, focus, blur, keypress, select
selection	change, focus, blur
file	change, focus, blur

他のイベントと同じく DOM Level 0のon*でも使える。

■9.4  Performing an Action When a Radio Button Is Clicked

ラジオボタンの例
選択肢のoneを選択した場合はline_textを無効にする。

window.onload=function() {
  var radios = document.forms[0].elements["group1"];
  for (var i = 0; i < radios.length; i++)
    radios[i].onclick=radioClicked;
}
function RadioClicked() {
    if (this.value == "one") {
      document.forms[0].elements["line_text"].disabled=true;
   }
}

これだと複数あったときの関係がわかりにくいので、下記みたいにswitchで分けると見やすくなる

function radioClicked() {
  // find out which radio button was clicked and
  // disable/enable appropriate input elements
  switch(this.value) {
    case "one" :
       document.forms[0].elements["intext"].disabled=false;
       document.forms[0].elements["intext2"].disabled=true;
       document.forms[0].elements["intext3"].disabled=true;
       break;
    case "two" :
       document.forms[0].elements["intext2"].disabled=false;
       document.forms[0].elements["intext"].disabled=true;
       document.forms[0].elements["intext3"].disabled=true;
       break;
    case "three" :
       document.forms[0].elements["intext3"].disabled=false;
       document.forms[0].elements["intext"].disabled=true;
       document.forms[0].elements["intext2"].disabled=true;
       break;
  }
}

■9.6  Canceling a Form Submission

submitをキャンセルする。
以前でてきたcancelイベントを使う。
formのsubmitにキャンセルするかを判断するイベントリスナーを登録して、値が変だったらキャンセルする。

// listen to an event
function listenEvent(eventObj, event, eventHandler) {
   if (eventObj.addEventListener) {
      eventObj.addEventListener(event, eventHandler,false);
   } else if (eventObj.attachEvent) {
      event = "on" + event;
      eventObj.attachEvent(event, eventHandler);
   } else {
      eventObj["on" + event] = eventHandler;
   }
}
// cancel event
function  cancelEvent (event) {
   if (event.preventDefault) {
      event.preventDefault();
   } else {
      event.returnValue = false;
   }
}
window.onload=function() {// イベントを付ける
   var form = document.forms["picker"];
   listenEvent(form,"submit",validateFields);
}
function validateFields(evt) {
   evt = evt ? evt : window.event;
   //...　処理
   if (invalid) {// 結果がおかしかったらキャンセル
      cancelEvent(evt);
   }
}

■9.7  Preventing Duplicate Form Submissions

何かふるーいソースで見かけるような感じがする重複送信の防止。
フォームの重複送信はUIで最悪な問題だ。課金のボタンなど実害の問題になることもあり得る。
この重複問題は場合によってどのくらいstrictにするべきかを考える。

• コメント欄

重複送信が実際に起きてもちょっとしたノイズになるくらいなので、軽く判定するだけでいい。

• 購入ボタン

これは重複や予想外のsubmitが起きると問題になるため、厳密に判定する必要がある。

• カスタマーフィードバックの送信

何か問題が起きたときにユーザーに送ってもらうフィードバック送信ボタンの場合。
ユーザーはちゃんとフィードバックが送信できたか心配になるので、alertなど大げさに送信した事を伝えて、再度クリックできないように送信ボタンをdisabledにするなどの工夫がいる。

disabledにしっぱなしなのは明らかに動作がおかしいときに困るので、戻すボタンが一緒にあるといい。

■9.9  Modifying a Selection List Based on Other Form Decisions

リストで選択したら次の選択肢がでるようなパターン。

• Populating Selection Lists

IEではselect.addの第２引数をサポートしてないので、try..catchしてるとか。

      try {
        city.add(opt,null);
      } catch(e) {
        city.add(opt);
      }

内容的にはかなり優しいものが多いけど、WebサイトとしてこうあるべきだってJavaScriptの機能以外についても触れている。