FORMとの連携

ボタンのクリックへの連動

FORMを使えば、HTMLのページにボタンや入力欄を作ることができます。 いままでなら、サーバ側にcgiを置いて使うのが普通でした。 JavaScriptでは、このFORMの<INPUT>タグにonClickという 引数を設定し、Javascriptの関数呼び出しに使うことができます。

例ではボタンにback()という関数を起動するようにしています。 これで、ボタンを押すとそれぞれ1ページ前、2ページ前、3ページ前 に戻るようになっています。 


<SCRIPT LANGUAGE="JavaScript">
function back(num)
{
	num = num * (-1);  // 戻る場合はマイナス値
	history.go(num);   
}
</SCRIPT>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="back 1 page" onClick="back(1)">
<INPUT TYPE="button" VALUE="back 2 page" onClick="back(2)">
<INPUT TYPE="button" VALUE="back 3 page" onClick="back(3)">
</FORM METHOD="post">
ボタンを押すと、ブラウザの「戻る」ボタンのような働きをします。

ボタンのonClickで、back()関数を呼び出しスクリプトが実行される。 ページを戻す操作はhistory.go()で行うことができる。