Web標準化時代のJavaScript

フォーム送信の書き方

従来のフォームデータの送信時にはformタグにonSubmitやonResetイベントを書く事が多いでしょう。これは入力された内容を調べる事が多くあるためです。例えばフォームデータ送信時にアラートダイアログを表示する場合には以下のようにformタグにonSubmitイベントを書く事になります。【サンプル1を実行
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
</head>
<body>
<form id="enqForm" onSubmit="alert('send');return false;">
<input type="text" value="sample">
<input type="submit">
</form>
</body>
</html>
ここでもHTMLファイルとJavaScriptファイルを分離する事になります。この場合にはページが読み込まれた後にformタグのイベントハンドラを設定するためwindow.onloadと組み合わせます。あとはdocument.getElementById()を使ってformタグにアクセスしイベントハンドラを設定します。この場合でもfunction(){ 〜 }として名前のない関数(無名関数/匿名関数)を使って一時的に処理を実行するように設定します。【サンプル2を実行
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="send.js"></script>
<title>Sample</title>
</head>
<body>
<form id="enqForm">
<input type="text" value="sample">
<input type="submit">
</form>
</body>
</html>
■スクリプトファイル (send.js)
window.onload = function() {
var formObj = document.getElementById("enqForm");
formObj.onsubmit = function() {
alert("send");
return false;
}

}