Q&A
JavaとJavaScriptは似て非なるものです。質問内の表記を調整してください。
前提・実現したいこと
再度、お世話になります。
fc2カートにてショッピングページを運営しております。
先日、ここでご教授頂いた方法に基づいてチェックボックスによるフィルタ検索機能を追加しましたが、他のcheckboxの機能と競合してしまったらしく、
検索機能と他のcheckboxによる機能が両立できる解決策を探しております。
htmlは書き換えられますが、大元のショップのjavascriptは仕様で書き換えられないので、
別ファイルにして読み込ませようと考えております。
アドバイスいただけましたら、お願いいたします。
なお、/?word=AB+CD+{テキストボックスの語句}という結果になるのであれば、
checkboxにての機能追加にはこだわっておりません。
大元のショップのスクリプトファイルのコードですが、
リンクを貼れるようですので、掲載いたします。
こちら
実験中のショップのURLも掲載いたします。
こちら
他にも何か必要なものがありましたら、ご連絡くださいませ。
発生している問題・エラーメッセージ
「https://xxx.com//?word=」の後に、「AB+CD+{テキストボックスの語句}」にするという機能自体はとても上手く機能しているのですが、
メールの送信ボタンやカートに入れるボタンなど、他のcheckbox機能を阻害している状況です。
エラーメッセージ
firefox:
TypeError: can't convert undefined to object kissdesigndoll.cart.fc2.com:147:9
map self-hosted:282:13 <匿名関数>
https://xxx.cart.fc2.com/:147:9
ページ内該当コード
147 var v=[].map.call(t.elements["w"],function(x){
148 return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:"";
149 }).filter(function(x){return x!==""}).join(" ");
該当のソースコード
詳細検索のhtmlとjavascript
html
1実際に使用しているコードは長いため、同じ仕様の短いものを記述しております。 2<form method="get" action="{search.url}"> 3 <span class="menusp">ああああ</span> 4 <div class="menus1"> 5 <div> 6 <a><label><input class="checkbox" name="w" value="AB" type="checkbox"><span>AB</span></label></a> 7 <a><label><input class="checkbox" name="w" value="CD" type="checkbox"><span>CD</span></label></a> 8 </div> 9 <div> 10 <a><label><input class="checkbox" name="w" value="EF" type="checkbox"><span>EF</span></label></a> 11 <a><label><input class="checkbox" name="w" value="GH" type="checkbox"><span>GH</span></label></a> 12 </div> 13 </div> 14 <div class="searchbox"> 15 <input name="w" value="" type="text"> 16 <input value="さがす" class="submit" type="submit"> 17 </div> 18</form>
javascript
1document.addEventListener('submit',function(e){ 2 var t=e.target; 3 e.preventDefault(); 4 var f=document.querySelector('#f0'); 5 if(f) f.parentNode.removeChild(f); 6 var v=[].map.call(t.elements["w"],function(x){ 7 return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:""; 8 }).filter(function(x){return x!==""}).join(" "); 9 var f=document.createElement("form"); 10 f.setAttribute("id","f0"); 11 f.setAttribute("action",t.getAttribute("action")); 12 f.setAttribute("method",t.getAttribute("method")); 13 f.style.display="none"; 14 var word=document.createElement("input"); 15 word.type="text"; 16 word.name="word"; 17 word.value=v; 18 f.appendChild(cword); 19 document.querySelector('body').appendChild(f); 20 f.submit(); 21});
例としてカートに入れるボタンのhtml(javascriptはこちらを参照ください。)
<dd class="submit"> <input value="カートに入れる" class="btn_submit_cart" type="submit"> <input name="Submit_cart" value="true" type="hidden"> <input name="item_id" value="511" type="hidden"> </dd>
試したこと
変数のバッティングかと思い、t,f,x,wordなどの変数を他の単語に変えてみたりしましたが、やはり同じ結果でした。
補足情報（FW/ツールのバージョンなど）
環境：PCブラウザのfirefox,chrome、スマホブラウザのchromeにて状況確認
回答1件
0
ベストアンサー
JavaScriptの該当行通りのエラーだと思います。148行目を確認すると、
javascript
1return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:"";
となっています。読み解くと、フォーム属性がチェックボックスであり、かつチェックされているかという判定なので、現状だと全部ここで処理されてしまうことになります。
なので、解決できるかもしれない方法としたら
0. 別のCheckBox要素と同一Formタグ内に記述しない。
0. そのスクリプト処理を行う前に、該当部分の処理を行い、そこで処理を中断するようにする
ソースの構造は詳しくわかっていないので確信はとれませんが、方法とすると、現在問題が発生しているスクリプトを読み込む前に別のスクリプトを読み込ませ、そこで処理を中断するのが一番適切な方法でしょうか。
投稿2018/08/02 09:09
総合スコア3624
ご回答、ありがとうございます。
他のCheckBox要素とは同一Formタグ内ではないですが、仰られるとおりここのフォーム内のみでスクリプトが処理されるような形になれば干渉しないとは思うのですが、どう記述していいのか困っております。
それなら、こういう手はどうでしょうか？
まず、選択チェックボックスがあるファイルにスクリプトタグを設け、javascript内にonClickイベントと定義関数を記述、定義関数内で、新たにFormオブジェクトを作り、そこへsubmitしてみてはどうでしょうか？
自分もちょっと検証テストしてみます。
例ですが、Formタグを使わずにチェックボックスの値を回収する書き方。このあとで任意のFormオブジェクトをdocument.createElement('form')で作ったり、hiddenにしてデータを投げたりする手もあるかな…と。
<!doctype>
<html lang="ja">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<form >
<label>東京</label><input type="checkbox" class="chk" name="chk" value="tokyo">
<label>名古屋</label><input type="checkbox" class="chk" name="chk" value="nagoya">
<label>大阪</label><input type="checkbox" class="chk" name="chk" value="osaka">
<input type="button" name="bt" value="検索" onclick="selValue()">
</form>
<script>
var selValue = function(){
var chkflags = [];
var chkcls = document.getElementsByClassName('chk');
var len = chkcls.length;
for(var i = 0 ; i < len; i++ ){
if(chkcls[i].checked){
chkflags[i] = true;
}else{
chkflags[i] = false;
}
}
}
</script>
</body>
</html>
再度のコメントありがとうございます。
試してみましたが、どうもうまくいかないみたいで申し訳ないです。
実験中の物ではありますが、ショップのリンクも記載いたしました。
よろしければ見てみてください。
今、使用している画像スライダーのように、特定のclassにのみ実行する形で記述できないか検討しております。
見たところ、form枠はしっかり分けられていますね。
ただ、Formタグのアクションプロパティがこうなっています。
action="/?tplid=570343&preview=66b3106462ff5ab63c1
パラメータのみ書かれていて、肝心の送信先ファイル名の記述がないようですが…？
action="/●●●?tplid=570343&preview=66b3106462ff5ab63c1
こういう記述になるのが正しいはずだとは思います。カートの部分はcart_in?xxxxx…ってなっていますので。
あと、これってhtmlとJavaScriptのみのべた書きじゃないですよね？何かECサイトの機能借りたり、WordPressみたいなものを使ったりしていませんか？Actionの記述が何かそれっぽいので…
仰られるとおり、借り物です。
お店ですので、支払い関係を考えると自前で組むのはちょっと危なかったので。
こちらでもご意見を参考にいろいろ試したのですが、どうにも大元のスクリプトが干渉しますので、何か別の視点で方法を考えたいと思います。
お付き合いいただき、本当に感謝しております。
いろいろとありがとうございました。
あなたの回答
tips
プレビュー
