iPhone で jQuery によるフォームの送信ができない問題の対処法

jQuery submit() が Safari のブラウザで動作しない

開発中のウェブサイトにて、iPhone の Safari でフォームが送信できない問題があることに気づきました。フォームごとに動作したりしなかったりと動作が安定せずに頭を抱えました。

調査を行ったところ iPhone にて、jQuery による submit() が正常に動作していない様子。

そこで今後のためにも色々と動作検証を行いながら調査してみたので、情報をまとめていきます。

端末とブラウザごとの jQuery submit() の動作結果

調査結果をみて分かるように 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 で動作しないフォーム

<form method="post" id="testForm">
<input type="submit" name="send" onClick="jsExec()" value="送信"/>
</form>

<script>
function jsExec(){
  $('#testForm').submit();
}
</script>

iPhone で動作するフォーム

<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 でパラメータを追加すればよいという事で、最善の解決方法が下記の通りになります。

最善の解決法

<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 を対象のパラメータに設定する必要があります。

 

ウェブプログラミングについては下記の本も参考になるので、スキルアップにお役立てください。

体系的に学ぶ 安全なWebアプリケーションの作り方

created by Rinker

徳丸 浩(著)
ページ数： 688ページ
出版社：SBクリエイティブ
発売日：2018/06/21

出典：amazon

• Kindle
• Amazon