hidden要素を含むフォームを作成した際、iPhoneにおいてsubmitボタンが反応しなくなるという不具合が発生しました。
GET値やPOST値が空になるなどではなく、そもそもボタンを押しても無反応(サーバーにリクエストしている様子がない)状態です。
AndroidやWindowsでは問題ありません。(Macは確認できていません。)
なお該当端末ではSafariでもLINE内のブラウザでも症状は発生し、ブラウザ固有の問題ではない様子でした。
以下が該当のソースコード(そのままではありませんが)です。
<form method="post">
<input type="number" name="hoge" value="999" required hidden>
<button type="submit">submit</button>
</form>どこに問題があるか分かりますか？
ボタンが反応していなかったことから、問題はサーバー側の処理ではないことは予想できていたのですが、それでも、思い込みも含めて発見までに少し時間がかかってしまいました。
iPhoneを含めて正常に動くコードはこちらです。
<form method="post">
<input type="hidden" name="hoge" value="999" required>
<button type="submit">submit</button>
</form>違いには気づいていただけましたか？
<input hidden>が<input type=”hidden>に変わっています。
要素を隠したい場合、CSSでdisplay:none;とかvisibility:hidden;とかすることが多いので、あまり深く理解していなかったのですが、何も考えずに
「確かタグにhidden付けたら非表示にできたはず……行けた行けた、WindowsでもAndroidでも問題なし」
と済ませてしまったことで、不具合を生じさせる結果となってしまいました。
しかも、この現象が検索しても出て来ず(調べ方が下手だっただけかもしれません)、マニュアルでinputタグを再確認して初めて怪しいと気がつきました。
もしかしたらやってしまいがち？？なミスかもしれません。
この記事が解決のお役に立てれば幸いです。
