質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17507questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9553questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

チェックボックスによるフィルタ検索機能を追加

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 133

 前提・実現したいこと

お世話になります。
fc2カートにてショッピングページを運営しております。
チェックボックスによるフィルタ検索機能を追加しようとしたのですが、
上手くいきません。

/?word=の後に、zk+FK+{テキストボックスの語句}とならないと
検索されないようですので、そうなるようにしたいです。

htmlは書き換えられますが、javaは仕様で書き換えられないので、
別ファイルにして読み込ませようと考えております。
アドバイスいただけましたら、お願いいたします。

大元のスクリプトファイルのコードは長すぎてここでは記述できませんが、
必要でしたらご提供いたしますので、ご連絡くださいませ。

 発生している問題・エラーメッセージ

https://*****.cart.fc2.com/?word=zakka&word=fuku&word=
となってしまい、うまく検索結果が出てきません。

 該当のソースコード

                <li class="search">
                    <form name="form" method="get" action="{search.url}">
                        <input type="checkbox" name="word" value="zakka" />雑貨
                        <input type="checkbox" name="word" value="fuku" /><input type="text" name="word" value="{search.word}" />
                        <input type="submit" value="検索" class="submit" />
                    </form>
                </li>

 試したこと

<input type="checkbox" name="word" value="zakka" />
のnameを変えたりしましたが、必ず値が&で追加されて、検索されません。
<input>~部分のコードを<fieldset>でまとめてもうまくいきませんでした。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

余計なデータをおくってもいいなら、こんな感じ

<script>
document.addEventListener('submit',function(e){
  var t=e.target;
  e.preventDefault();
  if(t.elements["word"]) t.removeChild(t.elements["word"]);
  var v=[].map.call(t.elements["w"],function(x){
    return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:"";
  }).filter(function(x){return x!==""}).join(" ");
  var word=document.createElement("input");
  word.type="hidden";
  word.name="word";
  word.value=v;
  t.appendChild(word);
  t.submit();
});
</script>
<form method="get">
<input type="checkbox" name="w" value="zakka" />雑貨
<input type="checkbox" name="w" value="fuku" />服
<input type="text" name="w" value="あああああ" />
<input type="submit" value="検索" class="submit" />
</form>

 追記

<script>
document.addEventListener('submit',function(e){
  var t=e.target;
  e.preventDefault();
  var f=document.querySelector('#f0');
  if(f) f.parentNode.removeChild(f);
  var v=[].map.call(t.elements["w"],function(x){
    return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:"";
  }).filter(function(x){return x!==""}).join(" ");
  var f=document.createElement("form");
  f.setAttribute("id","f0");
  f.setAttribute("action",t.getAttribute("action"));
  f.setAttribute("method",t.getAttribute("method"));
  f.style.display="none";
  var word=document.createElement("input");
  word.type="text";
  word.name="word";
  word.value=v;
  f.appendChild(word);
  document.querySelector('body').appendChild(f);
  f.submit();
});
</script>
<form method="get" action="x.php">
<input type="checkbox" name="w" value="zakka" />雑貨
<input type="checkbox" name="w" value="fuku" />服
<input type="text" name="w" value="あああああ" />
<input type="submit" value="検索" class="submit" />
</form>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/13 14:51

    ご回答ありがとうございました。
    試してみましたが、うまくいきませんでした。

    /?w=zakka&w=fuku&w=あああああ&word=zakka+fuku+あああああ

    上の部分の「w=zakka&w=fuku&w=あああああ&」がいらないのですが、
    どうにもわからないです。

    キャンセル

  • 2018/07/13 15:25

    > 余計なデータをおくってもいいなら

    と前置きしてあるとおりですがやはりいらないとなると
    追記分で対応ください

    キャンセル

  • 2018/07/13 15:32

    ご回答、ありがとうございました!
    余計なデータがあっても検索結果としてでうまくいくのであればよかったのですが、
    やはりだめでした。
    追記分の物でうまくいきました!
    本当にありがとうございましたm(u_u)m

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17507questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9553questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。