79
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

「戻る」ボタンを作るときは<button type="button" >で。

Last updated at Posted at 2016-04-12

なんとか更新を続けられている。脱三日坊主を目指します。

本題

下記のようなボタンを作った時のこと

<button onclick="history.back()">戻る</button>
<button type="submit" id="submit">登録</button>

「登録」ボタンで次画面に遷移するのはいいのですが、なぜか「戻る」ボタンを押してもsubmit判定されて次画面に遷移しまいました。

この理由は MDNによるbutton 要素に使える属性の解説に書いてありました。

type
submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作です。

なるほど。button要素にtype属性を指定しないと、type="submit"の扱いになるHTMLの仕様なんですね。
リセットボタンとかを作る時も同様の注意が必要ですな。
というわけで、

<button type="button" onclick="history.back()">戻る</button>
<button type="submit" id="submit">登録</button>

と修正してきちんと動くようになりました。
分かってしまえば非常に単純ですが、つい見落としてしまいました。

所感

読んでくださりありがとうございました。(このくらいのさくっと30分以内に執筆出来る記事を増やしていきたいです)

79
61
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
79
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?