JavaScriptのonSubmitが効かない！！！その１

PHPのサーバー側の勉強をしていて、まさかのJavaScriptで躓くとは思っていませんでした。
しかもネット上でonSubmitに関する問題に直面した人は多数いたのですが、私のような現象になった人はいなかったようです。。。
今回二つの問題がやっと解決できた（？）ので、共有したいと思います。

#onSubmitじゃなくてonClickつかえばいいじゃん

と思いますよね。私も最初はそう思ってやっていましたが、onClickを使ってしまうとreturnの結果がtrueでもfalseでも結局のところ画面遷移をしてしまう。。。
最初の問題のソースコードです（PHPを記述していますがあまり気にしないでください、JavaScriptの部分だけ見ていただければ大丈夫です）。

```exer.php
<?php
require_once("exer1205.php");
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>確認画面</title>
    <script type="text/javascript">

    function check(){
      if(window.confirm("本当に送信していいですか？")){
        return true;
      } else {
        window.alert("戻るボタンを押して入力しなおしてください。");
        return false;
      }
    }

    </script>
  </head>
  <body>
    <center>
      <h2>入力の内容に間違いはないですか？</h2>
      <?php
      $user = new User();

      $user->setId($_POST["id"]);
      echo "ID：".$user->getId()."<br>";

      $pass = $user->setPassword($_POST["pass"]);
      echo "パスワード：".$user->getPassword($pass)."<br>";

      $name = $user->setName($_POST["name"]);
      echo "名前：".$user->getName($name)."<br>";

      $tel = $user->setTel($_POST["tel"]);
      echo "電話番号：".$user->getTel($tel)."<br>";

      $mail = $user->setEmail($_POST["mail"]);
      echo "E-mail：".$user->getEmail($mail)."<br>";
      ?>

      <form method="post" action="exer1206-2.php" onsubmit="return check()">
        <input type="button" value="戻る" onclick="history.back()" />
        <input type="submit" value="送信する">
      </form>
    </center>
  </body>
</html>

```

これが全体のソースコードです。
JavaScriptの部分ですが、ここのサイト(http://www.tagindex.com/javascript/form/submit.html)
を丸パクリしました。もちろん私のコード仕様に合わせています。

```exer.php
    <script type="text/javascript">

    function check(){
      if(window.confirm("本当に送信していいですか？")){
        return true;
      } else {
        window.alert("戻るボタンを押して入力しなおしてください。");
        return false;
      }
    }

    </script>
```

```exer.php
      <form method="post" action="exer1206-2.php" onsubmit="return check()">
        <input type="button" value="戻る" onclick="history.back()" />
        <input type="submit" value="送信する">
      </form>
```
サイト見ていただければ分かりますが、上二つはほとんど同じです。

最初はonClickを使ってたので

```exer.php
      <form method="post" action="exer1206-2.php">
        <input type="button" value="戻る" onclick="history.back()" />
        <input type="submit" value="送信する" onclick="check()">
      </form>
```
とこんな感じになってました。そして何度実行しても、思った結果にならなかったです。


##onClickを使った実行結果
文字は適当に入力しています。最初の画面です。

![スクリーンショット 2016-12-06 15.24.08.png](https://qiita-image-store.s3.amazonaws.com/0/145671/76cf511c-7658-b3b9-ae86-45a380814893.png)

「送信する」を押した時の画面。「OK」を押せば次の画面に遷移します。
問題は「キャンセル」を押したとき…
![スクリーンショット 2016-12-06 15.24.26.png](https://qiita-image-store.s3.amazonaws.com/0/145671/cf70bd55-7c20-3208-72f1-b575fb0810f7.png)

「キャンセル」を押したときの画面。ここで「OK」を押せば、何も起きずダイアログだけが消えるはずでした。
![スクリーンショット 2016-12-06 15.24.43.png](https://qiita-image-store.s3.amazonaws.com/0/145671/fdbb7d65-bdee-aa8d-9f15-8b25243dc930.png)
ですが、onClickを使っているので、結果がtrueであろうが、falseであろうが遷移してしまう。なので、検索した結果onSubmitにたどり着いたのです、が、ここでもまた問題が発生しました。。。


##onSubmitを使った実行結果
このときの実行画面はないです。なぜかというと、「送信する」を押すと、そもそもダイアログすら出ずに次のページに飛んでしまうからです。
まじで意味がわからん。変なところで躓いたイライラが募るばかりでした。


#ちょっと書き方を変えてみる
さっきのやつ。

```exer.php
    <script type="text/javascript">

    function check(){
      if(window.confirm("本当に送信していいですか？")){
        return true;
      } else {
        window.alert("戻るボタンを押して入力しなおしてください。");
        return false;
      }
    }

    </script>
```

このときの推測ですが、onSubmitにtureかfalseが返っていないんだろうと思い、ちょっと変えてみました。
それが次のソースです。

```exer.php
    <script type="text/javascript">

    var check = function(){
      if(window.confirm("本当に送信していいですか？")){
        return true;
      } else {
        window.alert("戻るボタンを押して入力しなおしてください。");
        return false;
      }
    }

    </script>
```

単純に関数を変数に入れてしまって、変数にtrueかfalseを変えすようにしました。
意味合い的にはほとんど変わらないと思います。

##結果
実行画面はないですが、結果的には実行できて、ダイアログも出る、「キャンセル」→「OK」で画面遷移しない、最初のダイアログで「OK」を押すと次の画面に遷移する。
完璧な挙動です！　ですが、結局なぜ動かなかったのかわからない・・・。

#またさっきのコードに戻してみた
```exer.php
    <script type="text/javascript">

    function check(){
      if(window.confirm("本当に送信していいですか？")){
        return true;
      } else {
        window.alert("戻るボタンを押して入力しなおしてください。");
        return false;
      }
    }

    </script>
```
これです。
実行してみると、なんと！！！！　正しい挙動をしたんですよ！！！！
ダイアログも出る、「キャンセル」→「OK」で画面遷移しない、最初のダイアログで「OK」を押すと次の画面に遷移する。
上のやつと同じです。なんでだろう。


#解決策として。。。
プログラム友人に聞いてみたところ、たぶんキャッシュがたまってたんじゃないかと言われました。確かに、プログラムがうまくいかず、何度も違うコード試していたのでたまっていたと思います。
それで、違う書き方（関数を変数に代入してやるやつ）をしてみたところできるようになった、と。
直接的なエラーではなく、全くわからないものだったので今回は本当に困りました。
長くなったのでonSubmit問題その２は次に書こうと思います。これは私の単純なミスだったんですが…。