• 文字サイズ


解決済

フォームの戻るボタンをクリック後、選択肢とjavascript制御が解除される

  • 相談者:非公開
  • 2021/11/12 18:45
お世話になります。

弊社本店サイトにて、お客様自身でカスタムできるページがあり、
お客様に選択に迷わないよう、javascriptを使い選択肢を制御しています。

▼該当ページ
https://www.4860.jp/original-order/kubota/kub-ord-kg/kub-ord-kg

入力・選択する上では、javascriptの動作に問題がないのですが、
入力の確認画面へ行き、前のページに戻るボタンを押し、前のページに戻った際、
javascriptで制御している箇所が解除されています。


▼問題の箇所①
「2 レザー(本体)カラーを選択して下さい」の項目で「2色以上」を選択します。

「2色以上をご希望の方」の内容が表示され、プルダウンメニューが選択できるようになります。
プルダウンを選択

ページ下部の「オーダー内容の確認」をクリックし、エラー画面に遷移します。
「前のページに戻る」をクリックすると、ラジオボタンの「2色以上」は保持されますが、
「2色以上をご希望の方」の内容が消え、2色以上をご希望の方のプルダウンメニューの内容も解除されています。


▼問題の箇所②

「14 指カバー・指あての有無を選択して下さい」の項目で「指カバーA」のプルダウンメニューを選択し、
他の「指カバーB、指あて」が選択ができないようになります

ページ下部の「オーダー内容の確認」をクリックし、エラー画面に遷移します。
「前のページに戻る」をクリックすると、プルダウンメニューの選択肢は残りますが、
「指カバーB、指あて」が選択ができてしまいます。


javascriptの制御を保持した状態で、ページに戻る設定がありましたら、
ご教示のほどよろしくお願いします。


▼該当ページのjavascriptの記述
<script>
//基本モデル切替
$(function() {
$(".tab li").click(function() {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
});
});
//2色以上選択した時
function checkradio( disp ) {

var kawaColor = document.getElementsByName("レザー(本体)カラー*3");
var kawa1 = document.getElementById("LC2List1");
var kawa2 = document.getElementById("LC2List2");
var kawa3 = document.getElementById("LC2List3");

document.getElementById('colors').style.display = disp;

if(kawaColor.value=="2色以上"){

} else {
//2色以上以外を選択した場合、プルダウンメニューをリセット
kawa1.selectedIndex = 0;
kawa2.selectedIndex = 0;
kawa3.selectedIndex = 0;

}
}
</script>
<script language="JavaScript" type="text/JavaScript">
function bmatch(txt,chk) {
if (txt.indexOf(chk) != -1) { return true; } else { return false; }
}
// 基本モデルを変更した場合のスクリプト
function changeModel(parts) {

// 選んだ基本モデルのタイプを調べる
var pitcher=false, infielder=false, outfielder=false, allposi=false;
model=parts.options[parts.selectedIndex].value;
if (model.match(/ピッチャー/i)) {pitcher=true;} //投手用
if (model.match(/外野/i)) {outfielder=true;} //外野手用
if (model.match(/オールポジション/i) || model.match(/オールラウンド/i)) {allposi=true;} //オールポジション
if (model.match(/内野/i) || model.match(/セカンド/i) || model.match(/ショート/i) || model.match(/サード/i)) {infielder=true;} //内野手用


// ウェブの選択可・不可変更処理(一番最初は飛ばす)
var webList = document.getElementsByName('ウェブスタイル*4');
for (var i = 1; i < webList.length; i++) {
switch (true) {
case pitcher && bmatch(webList[i].value,'ピッチャー'):break;
case infielder && bmatch(webList[i].value,'内野'):break;
case outfielder && bmatch(webList[i].value,'外野'):break;
case allposi && bmatch(webList[i].value,'オールポジション'):break;
default:webList[i].disabled=true; webList[i].selectedIndex=false; continue; break;
}
webList[i].disabled=false;
}

// バックスタイルの選択可・不可変更処理
var bsList = document.getElementsByName('バックスタイル*5');
if ( model.match(/FM1型/i) || model.match(/FM5型/i)|| model.match(/FM7型/i)|| model.match(/FM8型/i)) {
bsList[0].disabled=true; bsList[1].disabled=false;
} else {
bsList[1].disabled=true;
bsList[0].disabled=false;
}

// 芯トジの選択可・不可変更処理
var stList = document.getElementsByName('芯トジ形態*6');
stList[0].disabled=true; stList[2].disabled=true; //タテトジと辻トジを一度選択不可にする
if (allposi || pitcher || outfielder) {stList[0].disabled=false;} else {stList[0].checked=false} //タテトジ
if (allposi || infielder) {stList[2].disabled=false;} else {stList[2].checked=false} //辻トジ
}
// ウェブレースカラー選択
function changeWeb(parts) {
var elem = document.getElementsByName('ウェブレースカラー・オプション')[0];
if (bmatch(parts.value,'W-23') || bmatch(parts.value,'W-26')) {
elem.disabled = false;
} else {
elem.disabled = true; elem.selectedIndex = 0;
}
}
</script>
キーワード:本店サイトjavascript
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2021/11/13 09:28
ECマスターズの村井です。

休み明け担当よりご返答しますので、今しばらくお待ちください。………(省略)………
  • 返信者:非公開
  • 2021/11/17 20:50
ECマスターズの田中です。

確認が遅れてしまい、
数日経過しての返信となってしまいましたことを
深くお詫び申し上げます。

制御を保持した状態で戻………(省略)………
  • 返信者:非公開(質問者)
  • 2021/11/18 15:31
ECマスターズ 田中様。
お世話になります。

> 「window.location.reload();」にてリロードの処理を行うのですが、
> リロ………(省略)………
  • 返信者:非公開
  • 2021/11/18 17:03
ECマスターズの田中です。


> こちらの書き方はどのように記述すればいいでしょうか。

方法を探ったところ、
フォーム全体で値を一括で保存/読込………(省略)………
  • 返信者:非公開(質問者)
  • 2021/11/18 18:18
ECマスターズ 田中様。
お世話になります。

記述方法をありがとうございます。
早速、試してみたのですが、javascriptが動かなくなりました。 ………(省略)………
  • 返信者:非公開
  • 2021/11/18 18:37
ECマスターズの田中です。

ご不便をおかけして申し訳ありません。

お手数ですが、ご変更いただいた内容を、
先にご案内差し上げた下記記述に差し替えて………(省略)………
  • 返信者:非公開(質問者)
  • 2021/11/30 09:51
ECマスターズ 田中様。
お世話になります。

返事が遅くなり、申し訳ございません。
ページを修正致しましたが、変わっていないように感じます。
htt………(省略)………
  • 返信者:非公開
  • 2021/11/30 16:14
ECマスターズの田中です。

ご不便をおかけしており、申し訳ありません。
まずは、エラーをなくすために、
該当<script>タグの内容を、下記内容にま………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/01 10:18
ECマスターズ 田中様。
お世話になります。

頂いた内容に更新しましたが、
選択した際にエラーが出る状況です。
https://www.4860.j………(省略)………
  • 返信者:非公開
  • 2021/12/01 14:02
ECマスターズの田中です。

それでは、お手数ですが
改めて、<script>タグを下記内容にまるごと差し替えて
ご確認いただきますようお願いします。 ………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/02 12:36
ECマスターズ 田中様。
お世話になります。

頂いた、scriptの内容を反映致しました。
エラーなく、動くようになりました。
https://ww………(省略)………
  • 返信者:非公開
  • 2021/12/02 14:49
ECマスターズの田中です。

> 戻るを押した後、値が残るようにする設定は
> どのように設定すればよろしいでしょうか。

現在ページに設置されている………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/03 16:46
ECマスターズ 田中様。
お世話になります。

頂いた内容を入れて見たのですが、
動かなくなる項目もあり、デベロッパーツールでエラーが出ています。
h………(省略)………
  • 返信者:非公開
  • 2021/12/03 18:13
ECマスターズの田中です。

ページを確認したところ、
前回の返信にて
「下記内容に差し替えていただきますようお願いします。」
としてご案内差し上げた………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/07 15:14
ECマスターズ 田中様。
お世話になります。

ご指摘、ありがとうございます。
早速修正致しました。
https://www.4860.jp/orig………(省略)………
  • 返信者:非公開
  • 2021/12/07 16:22
ECマスターズの田中です。

scriptタグ内に含まれる
if (kawaColor.value == "2色以上") {
の指定が誤っており、常にf………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/07 18:26
ECマスターズ 田中様。
お世話になります。

ご確認、ありがとうございます。
戻るボタンをクリックして、値が残っていたのを確認できました。
http………(省略)………
  • 返信者:非公開
  • 2021/12/08 10:37
ECマスターズの田中です。

> 戻るボタンを押しても、見た目の制御を保持した状態にする方法は、設定可能でしょうか?

はい。
scriptタグ内、/………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/08 14:07
ECマスターズ 田中様。
お世話になります。

頂いた内容を追加致しました。
戻るボタンを押しても、表示した状態を確認できました。

選択肢の内容に………(省略)………
  • 返信者:非公開
  • 2021/12/08 14:38
ECマスターズの田中です。

> 選択肢の内容によって、ラジオ・プルダウンメニューの
> 選択可否の状態を保持するには、どのように記述すればよろしいでしょ………(省略)………
  • 返信者:非公開(質問者)
  • 2021/12/09 10:49
ECマスターズ 田中様。
お世話になります。

頂いた内容を差し替えました。
行いたい内容で表示を確認できました。
ありがとうございます。

頂い………(省略)………
  • 返信者:非公開
  • 2021/12/09 15:12
ECマスターズの田中です。

jQueryを利用する方法ですとうまく動作しなかったので、

if(document.getElementById('指カ………(省略)………
このフォーラムへの質問は終了しました