前提・実現したいこと
再度、お世話になります。
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件
あなたの回答
tips
プレビュー