DOMによるフォーム・コントロールの操作 (3/6)
作成:2010-04-02 12:24
更新:2010-05-11 18:42
更新:2010-05-11 18:42
■フォーム・コントロールの操作
ドキュメントの要素の操作と、イベント属性の利用。この２つがわかれば、それだけでいろいろなことができます。例えば、「フォームの操作」などです。
フォームは、通常、様々な情報をサーバーに送信するのに使われます。が、JavaScriptを使って、直接コントロールを操作すれば、サーバーに送信しなくともフォームを利用することができます。
下のリスト部分に、簡単なサンプルをあげておきました。入力フィールドにテキストを書いてボタンをクリックすると、メッセージが表示されます。ここでは、ボタンを表示する<input type="button">タグに、
doAction関数では、document.getElementByIdで<input type="text">タグのDOMオブジェクトを取り出し、そこから入力されたテキストを変数strに取り出しています。入力したテキストは、「value」というプロパティで得ることができます。後は、<div>タグのオブジェクトを取得して、innerHTMLで表示テキストを設定するだけです。意外と簡単でしょう？
もう１つ、実は意外なところに注意点があります。<form>タグを見てください。ここにも、こういうイベント属性が用意されているのに気がつくでしょう。
つまり、onsubmit="return false;"というようにして、onsubmitでfalseを返すようにすることで、フォームをサーバーに送信しないように設定していたのですね。これは、JavaScriptでフォームを利用する際、よく使われる手法ですので覚えておきましょう。
フォームは、通常、様々な情報をサーバーに送信するのに使われます。が、JavaScriptを使って、直接コントロールを操作すれば、サーバーに送信しなくともフォームを利用することができます。
下のリスト部分に、簡単なサンプルをあげておきました。入力フィールドにテキストを書いてボタンをクリックすると、メッセージが表示されます。ここでは、ボタンを表示する<input type="button">タグに、
onclick="doAction();"このように記述しています。「onclick」は、ユーザーがこのコントロールをクリックしたときに発生するイベントの属性です。これでdoActionを実行し、処理していたわけです。
doAction関数では、document.getElementByIdで<input type="text">タグのDOMオブジェクトを取り出し、そこから入力されたテキストを変数strに取り出しています。入力したテキストは、「value」というプロパティで得ることができます。後は、<div>タグのオブジェクトを取得して、innerHTMLで表示テキストを設定するだけです。意外と簡単でしょう？
もう１つ、実は意外なところに注意点があります。<form>タグを見てください。ここにも、こういうイベント属性が用意されているのに気がつくでしょう。
onsubmit="return false;"この「onsubmit」は、フォームを送信する際に発生するイベント用の属性です。フォームは、送信の要求があると、まずこのonsubmitのイベントを発生させます。そしてイベントの実行結果がtrueであれば、そのままフォームの送信を行い、falseならば送信処理をキャンセルします。
つまり、onsubmit="return false;"というようにして、onsubmitでfalseを返すようにすることで、フォームをサーバーに送信しないように設定していたのですね。これは、JavaScriptでフォームを利用する際、よく使われる手法ですので覚えておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
function doAction(){
var field = document.getElementById("text1");
var str = field.value;
var message = document.getElementById("message");
message.innerHTML = "あなたは、「" + str + "」と書きました。";
}
//-->
</script>
</head>
<body onload="initial();">
<H1>TEST.</H1>
<div id="message">テキストを入力して下さい。</div>
<form onsubmit="return false;">
<input type="text" id="text1">
<input type="button" onclick="doAction();" value="クリック">
</form>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る