JavaScriptによるHTMLの「通常ボタン（button）」、「サブミットボタン（submit）」のよく使う小技です。
よく使う割には、使い方をすぐ忘れるのでメモ。
通常ボタンのonclickイベントで画面遷移
「location.href」でアンカーのようにGETリクエスト送信できる。
下記のように「onclick」属性に指定すれば、ボタン押下で画面遷移できる。
<html>
<head>
</head>
<body>
<form name="frm" method="post" action="result.html">
<input type="button" onclick="location.href='result.html'" value="ボタン１" />
</form>
</body>
</html>
通常ボタンでサブミット
サブミットボタンを使わずに、通常ボタンでサブミットする。
JavaScriptの「submit」関数でフォームをPOSTリクエスト送信できる。
下記のように「onclick」属性に指定すれば、ボタン押下でサブミットできる。
<html>
<head>
</head>
<body>
<form name="frm" method="post" action="result.html">
<input type="button" onclick="document.frm.submit();" value="ボタン２" />
</form>
</body>
</html>
通常ボタンでサブミット（JavaScript内でサブミット）
上記の「通常ボタンでサブミット」と同じことをJavaScript内で行う。
サブミット前に、JavaScript内で入力値チェックを行いたい場合などに使える。
<html>
<head>
<script type="text/javascript">
<!--
function cnfmAndSubmit() {
if (window.confirm('実行しますか？')) {
document.frm.submit();
} else {
return false;
}
}
// -->
</script>
</head>
<body>
<form name="frm" method="post" action="result.html">
<input type="button" onclick="cnfmAndSubmit();" value="ボタン３" />
</form>
</body>
</html>
サブミットボタンでサブミット前にJavaScriptでチェック
サブミットボタンでPOSTリクエスト送信される前に、JavaScript内で入力値チェックを行いたい場合に使える。
JavaScript関数呼出の前に「return」をつけて置くと、関数の戻り値でサブミットする・しないを制御できる。
サブミットしたい場合は「true」を、サブミットしたくない場合は「false」を返却してやる。
<html>
<head>
<script type="text/javascript">
<!--
function check() {
if (window.confirm('実行しますか？')) {
return true;
} else {
return false;
}
}
// -->
</script>
</head>
<body>
<form name="frm" method="post" action="result.html">
<input type="submit" onclick="return check();" value="サブミットボタン１" />
</form>
</body>
</html>
忘れぬようにせねば。
コメント