submitされない？何故なのか。備忘録 #JavaScript

やりたい事

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

事象

対象コード

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となっている事が原因でした。

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

気づき

buttonタグのid属性の命名がそもそも悪い
→どういうボタンなのか、どういう挙動をするのか、という情報を名前に含めるべきである。
既存コードだとしても、本当に良いのか、という疑いを持つ事。必要であればリファクタリングをする、あるいはリファクタリング対象として挙げておく。

まとめ

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

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

参考

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

おまけ

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