■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 |
■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にするべきかを考える。
- コメント欄
- 購入ボタン
- カスタマーフィードバックの送信
ユーザーはちゃんとフィードバックが送信できたか心配になるので、alertなど大げさに送信した事を伝えて、再度クリックできないように送信ボタンをdisabledにするなどの工夫がいる。
disabledにしっぱなしなのは明らかに動作がおかしいときに困るので、戻すボタンが一緒にあるといい。
■9.9 Modifying a Selection List Based on Other Form Decisions
リストで選択したら次の選択肢がでるようなパターン。IEではselect.addの第２引数をサポートしてないので、try..catchしてるとか。
try {
city.add(opt,null);
} catch(e) {
city.add(opt);
}
内容的にはかなり優しいものが多いけど、WebサイトとしてこうあるべきだってJavaScriptの機能以外についても触れている。
