Help us understand the problem. What is going on with this article?

submitされない?何故なのか。備忘録

やりたい事

ラジオボタンを配置。
選択されていれば、submitし、選択されていなければ、アラートを表示し、submitさせない。

事象

ezgif.com-video-to-gif (1).gif

対象コード

sample.html
<form action="hoge/index" method="post" id="register-form">
    <div>
        <p>
            <input type="radio" name="plan_type" value="リンゴ" id="select-fruits-apple"><span>リンゴ</span>
            <input type="radio" name="plan_type" value="バナナ" id="select-fruits-banana"><span>バナナ</span>
        </p>
    </div>

    <div>
        <button type="button" id="submit">送信</button>
    </div>
</form>

<script type="text/javascript">
    $(function() {
        $('#submit').on('click', function() {
            if ($('#select-fruits-apple').prop('checked') == false
                && $('#select-fruits-banana').prop('checked') == false) {
                alert('選択して下さい');
                return false;
            } else {
                $('#register-form').submit();
            }
        });
    });
</script>

原因

buttonタグのid属性がsubmitとなっている事が原因でした。

スクリーンショット_2019-01-13_15_59_02.png

何がどうなってどうだからid属性にsubmitという命名をしてはいけないのか、という内部的ロジックについては不明。

気づき

  • buttonタグのid属性の命名がそもそも悪い
    →どういうボタンなのか、どういう挙動をするのか、という情報を名前に含めるべきである。

  • 既存コードだとしても、本当に良いのか、という疑いを持つ事。必要であればリファクタリングをする、あるいはリファクタリング対象として挙げておく。

まとめ

思わぬ罠」に掛かってしまった訳ですが、気づき・学びがあったので良い経験となったのかなと。
命名に関しては非常に大切な部分ですので、既存コードといえど疑いの視点を持って行きたいと思います。

上記でも記載しましたが、内部的に何がどうなってどうだからbuttonタグのidにsubmitという命名にしてはいけないのか、については不明な為、分かる方がいらっしゃいましたら、ぜひ教えて頂きたいので、コメントの方よろしくお願い致します。

参考

jQueryでsubmitしたり無効にする方法

おまけ

Twitterやってます!外部のエンジニアの方ともどんどん繋がりたいと考えていますので、是非フォローして頂ければと思います!@Tatsuo96
ブログ始めました!
https://note.mu/tatsuo_iriyama

tatsuo-iriyama
Web Engineer|96'|高卒|前職:溶接工|2019-01〜ユアマイスター株式会社|
yourmystar
サービス産業のIT化プラットフォーム「ユアマイスター」と大切なものをもっと大切にするメディア「ユアマイスター スタイル」を運営するスタートアップです。
http://corp.yourmystar.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした