シミュレーションオーダーページの挙動について

Question

お世話になります。
スワロースポーツ岡本と申します。

弊社サイトにて、グラブのシミュレーションページがあります。
項目を選択、入力し、オーダー内容の確認をクリックし、確認画面から、前のページに戻ると、リロードする挙動が発生します。

スマホ(iOS/Safari)で問題の挙動が多く見られる印象です。

▼グラブ シミュレーションオーダーページ
https://www.4860.jp/original-order/kubota/kub-ord-ng-simu/kub-ord-ng-simu

▼スマホで下記のページから対象商品の「軟式グラブシミュレーションオーダー」をクリックし、上記にある入力を行うと起きます。
https://www.4860.jp/special/order_campaign/

また、リロードされた状態から、先にすすみ、前のページに戻ると、
選択によって選択できなくする制御が選択できる項目に対して、制御が掛かってしまう現象が起きています。
→「10.刺繍オプション/ 1.【通常刺繍】」で入力した内容が選択、入力が出来なくなります。

ディベロッパーツールで確認しても、エラー表示がされておりません。
原因がどこにあるのか不明です。

似たような現象の解決方法をご存知でしたら、
ご教示いただけると幸いです。###HR######IMG07073faeb795804c61ec3cb9e3c8c4ba5.jpegIMG0###

Answer

ECマスターズの北原です。

>項目を選択、入力し、オーダー内容の確認をクリックし、確認画面から、前のページに戻ると、リロードする挙動が発生します。

IOS Safariで動作しましたところ
確認画面で『前のページに戻るボタン』をクリック後
ページがリロードされることを確認致しました。

『前のページに戻るボタン』では
JavaScript制御のhistory.back();で
ブラウザバックを行なっているかと存じます。

ブラウザバックでは基本的にキャッシュが残っている場合は
フォームの内容が入力された状態で戻ることができますが、
キャッシュが残ってない場合はページの再読み込みを行います。

そして、キャッシュが残っていることは保証されませんので、
リロードされたり、されなかったりする場合がございます。

ブラウザバックはOSやブラウザで挙動も異なるため、
ブラウザバックでの『戻るボタン』の実装はお勧めしません。

今回のように『戻るボタン』をクリック後、
入力内容を保持したい場合は、
下記のような実装をご検討いただければと思います。

■入力画面 → 入力内容をPOST

■確認画面では$_POST[]で受け取り、hiddenフォームに格納
例）

Answer

ECマスターズ北原様。

お世話になります。
スワロースポーツ岡本です。

早速ですが、いただいた内容を確認いたしました。
確認画面がphpで作成した際の書き方をしておりますが、
弊社の確認画面以降が、CGIを使用しております。

CGIのファイルの記述では、決まった項目がなく、
変数で表示しています。
(cgi画面.jpg)

CGIでの書き方、解決方法をご存知でしたら、ご教示頂きたいです。

ご確認のほど、お願いいたします。###HR######IMG017e61653f2808ed3b28397bece032fe1.jpegIMG0###

Answer

ECマスターズの北原です。

>CGIでの書き方、解決方法をご存知でしたら、ご教示頂きたいです。

大変申し訳ございませんが、
私にCGI、perlの知見がございませんので、
参考になりそうな記事をお調べしました。

フォームからの入力を受け取る
http://www.web-liberty.net/improve/perl/input.html

フォーム入力後の確認画面表示について
https://oshiete.goo.ne.jp/qa/148924.html

お力添えできず申し訳ございません。