この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
目次
jQuery submit() が Safari のブラウザで動作しない
開発中のウェブサイトにて、iPhone の Safari でフォームが送信できない問題があることに気づきました。フォームごとに動作したりしなかったりと動作が安定せずに頭を抱えました。
調査を行ったところ iPhone にて、jQuery による submit() が正常に動作していない様子。
そこで今後のためにも色々と動作検証を行いながら調査してみたので、情報をまとめていきます。
端末とブラウザごとの jQuery submit() の動作結果
| 端末 | ブラウザ | 結果 |
|---|---|---|
| Windows(PC) | Chrome | 〇 |
| FireFox | 〇 | |
| IE 11 | 〇 | |
| Mac(PC) | Chrome | 〇 |
| Safari | 〇 | |
| iphone(スマホ) | Chrome | × |
| Safari | × | |
| Android(スマホ) | Chrome | 〇 |
| FireFox | 〇 |
調査結果をみて分かるように Windows10 の Chrome や FireFox、IE や Mac の Safari や Chrome は OK。スマホ端末である Android も問題なし。
iPhone のみで起こる問題であることが分かります。しかもブラウザ依存ではなく、iPhone 特有の動作です(汗)。
※上記の調査および挙動は iPhone8 と iPhoneXR で動作確認した結果です。
jQuery submit() が動作しない原因と解決法
jQuery submit() が iphone で動作しない原因
フォームから送信するトラフィックを確認したところ、iPhone のブラウザではフォームの submit ボタンのクリックしたタイミングで、
をデータに追加していることが判明しました。
つまり自分で jQuery で submit() する場合も同じパラメータを追加すれば動作するはず！ということで、問題が解決する目途が立ちましたね。
jQuery submit() を iphone で動作させる対処法
原因調査で判明した対処法である
をフォームに組み込めば動くはずなので、
動作しないプログラムと解決方法の施したプログラムを動作検証しました。
問題なく動作したので解決方法は、[name]=[name] で間違いなさそうです。
iPhone で動作しないフォーム
|
1 2 3 4 5 6 7 8 9 |
<form method="post" id="testForm"> <input type="submit" name="send" onClick="jsExec()" value="送信"/> </form> <script> function jsExec(){ $('#testForm').submit(); } </script> |
iPhone で動作するフォーム
|
1 2 3 4 5 6 7 8 9 10 |
<form method="post" id="testForm"> <input type="hidden" name="send" value="send"/> <input type="submit" name="send" onClick="jsExec()" value="送信"/> </form> <script> function jsExec(){ $('#testForm').submit(); } </script> |
問題が解決したので意気揚々と対応しようとしたところ別の問題点が発生しました。
複数のボタンがあるときに先に「[name]=[name]」書かれた方が強制的に実行される問題です。
つまり例を出すとフォームに「戻る」と「次へ」の2つのボタンがあるとき、
みたいな設定を行うとどちらのボタンを押しても「戻る」が実行されてしまいます。
頭を抱える結果になりましたが、
ボタンを押して後に実行する javascript でパラメータを追加すればよいという事で、最善の解決方法が下記の通りになります。
最善の解決法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form method="post" id="testForm"> <input type="submit" name="back" onClick="backFrom()" value="戻る"/> <input type="submit" name="send" onClick="sendFrom()" value="送信"/> </form> <script> function backFrom(){ $('<input>').attr({ 'type': 'hidden', 'name': 'back', 'value': 'back', }).appendTo('#testForm'); $('#testForm').submit(); } function sendFrom(){ $('<input>').attr({ 'type': 'hidden', 'name': 'send', 'value': 'send', }).appendTo('#testForm'); $('#testForm').submit(); } </script> |
さいごに
補足情報として最後に注意点を１つ記載します。
ウェブサイトの開発にてフレームワークを使用した環境の場合、jQuery 内で hidden 内の値を変更するとセキュリティエラーになる可能性があります。対象のパラメータをセキュリティ対象外にするなど、フレームワークの調整はご自身の環境に合わせて調整してください。
※CakePHP3 で言えば unlockedFields を対象のパラメータに設定する必要があります。
