JavaScriptによるHTMLの通常ボタン、サブミットボタンの小技

JavaScript プログラミング
この記事は約4分で読めます。

※当ブログではアフィリエイト広告を利用しています。

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="ボタン1" />
  </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="ボタン2" />
  </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="ボタン3" />
  </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="サブミットボタン1" />
  </form>
</body>
</html>

忘れぬようにせねば。

プログラミング
\よかったらシェアしてね!/
えふめん

大阪在住、30代。
業務系SE・社内SE。

PCトラブルの調査、自作デスクトップPCのこと、PC周辺機器のレビューなどの記事を書いています。

えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました