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

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

ただいまの
回答率

91.36%

  • PHP

    15159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11206questions

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

  • jQuery

    4888questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

チェックボックスの値を保持したまま受け渡しをしたい

受付中

回答 3

投稿 2017/11/27 22:55 ・編集 2017/11/29 02:47

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

miche

score 9

前提・実現したいこと

いつもお世話になってます。

自作のWordpressテーマに検索フォームを設置しているのですが、チェックボックスの選択した値の受け渡しがうまくいかずここ数日悩んでいます。
検索フォームでチェック項目を選択し、送信後は検索結果ページへ遷移します。
検索結果ページでは前のページで選択したチェックボックスが選択されたままの状態で、フォームの下に検索した結果を表示するようにしています。
前ページで選択したチェックボックスが値がうまく取得できていないのか、もしくは遷移先のPHPの記述が間違っているのか、受け渡しができず「checked="checked"」にならないという状況です。
少々ややこしい仕様のためテンプレートのsearch.php等は使用していません。
$_GETで受け渡す事も考えましたがチェックボックスのvalueが日本語なので$_POSTがやはり適切でしょうか?

他に、いくつか試したことも書いておきます。

初心者のためいくつかおかしい点はありますが、お力添えをいただければ幸いです。

追記

URLをjQueryで書き換えをしているためAjaxの方法で検証しているのですが、試したことにある

echo "チェックボックス\n";


ここのechoが表示されません…。アラートは出てくるので送れてはいるようです。
参考サイトのコードを変更しているので該当のソースコードに書いておきます。

該当のソースコード

送信前

<form method="post" action="/search/" id="form">
  <div class="vegetable">
    <h2>野菜</h2>
    <input type="checkbox" name="vege[]" value="トマト">トマト
    <input type="checkbox" name="vege[]" value="ビーマン">ピーマン 
    <input type="checkbox" name="vege[]" value="ジャガイモ">ジャガイモ 
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
    <input type="checkbox" name="fruit[]" value="りんご">りんご
    <input type="checkbox" name="fruit[]" value="オレンジ">オレンジ 
    <input type="checkbox" name="fruit[]" value="バナナ">バナナ 
  </div>

  <button class="submit-btn">送信</button>
</form>

送信後(野菜:ピーマン、フルーツ:バナナを選択した場合)

<form method="post" action="/search/" id="form">
  <div class="vegetable">
    <h2>野菜</h2>
    <input type="checkbox" name="vege[]" value="トマト">トマト
    <input type="checkbox" name="vege[]" value="ビーマン" checked="checked">ピーマン 
    <input type="checkbox" name="vege[]" value="ジャガイモ">ジャガイモ 
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
    <input type="checkbox" name="fruit[]" value="りんご">りんご
    <input type="checkbox" name="fruit[]" value="オレンジ">オレンジ 
    <input type="checkbox" name="fruit[]" value="バナナ" checked="checked">バナナ 
  </div>

  <button class="submit-btn">送信</button>
</form>

<div class="search-result">
  <h1>検索結果</h1>
  <!-- ここからは特に関係なし -->
  <h2>野菜</h2>
  <p>ピーマン</p>
  <h2>フルーツ</h2>
  <p>バナナ</p>
</div>


追記分

【jQuery】
 $("#form").submit(function(){
   var checks=[];
   $("input[type=checkbox]:checked").each(function(){
     checks.push(this.value);
   });

   $.ajax({
     type: "POST",
     url: "search",
     data: {
       "checks":checks
     },
     success: function(data){
       if(data != '') {
         alert(data);
       }
     }
   });
   return false;
 });

【PHP】(/search/に記述)
if (isset($_POST['checks'])) {
    echo "チェックボックス\n";
    foreach($_POST['checks'] as $check) {
        echo htmlspecialchars($check) . "が選択されました\n";
    }
}

試したこと(参考サイトから引用)

jQueryのAjaxを使って複数選択されたチェックボックスの値をPOSTする方法メモ

【jQuery】

$(function(){
    $("#form").submit(function(){
        //選択されたチェックボックスの値を配列に保存
        var checks=[];
        $("[name='check[]']:checked").each(function(){
            checks.push(this.value);
        });

        //セレクトボックスの値を変数に保存
        var select = $("#select").val();

        $.ajax({
            type: "POST",
            url: "form.php",
            data: {
                "checks":checks,
                "select":select
            },
            success: function(data){
                if(data != '') {
                    alert(data);
                }
            }
        });
        return false;  //submitイベントハンドラにfalseを返し,action処理をキャンセル
    });
});


【PHP】
if (isset($_POST['checks'])) {
    echo "チェックボックス\n";
    foreach($_POST['checks'] as $check) {
        echo htmlspecialchars($check) . "が選択されました\n";
    }
}
if (isset($_POST['select'])) {
    echo "セレクトボックスボックス\n";
    echo htmlspecialchars($_POST['select']) . "が選択されました\n";
}

その他
PHP:フォームからcheckboxの値の取得してチェック状態を保持する方法のメモ
【PHP】チェックボックスの値を受け取る

追記 URLパラメータ部分

$("form").submit(function() {
    var url = '/search?';

    var value = [];
    $("input:checked").each(function(){
      value.push($(this).val());
    });

    url += "カテゴリ="+value.join(",");
    location.href = encodeURI(url);
    return false;
  });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • num79kill

    2017/11/29 08:56

    https://api.jquery.com/serialize/でpost-dataをつくれなかったのかしら?

    キャンセル

回答 3

+2

実現したいことの処理を整理すると下記になるかと思います。
1.検索フォームにて、検索したい項目をチェック
2.送信ボタン押下後、Ajaxで検索処理用のphpに「チェックしたデータ」を飛ばす
3.送信ボタン押下による画面遷移をキャンセル
4.Ajaxで返って来たデータを処理して、同一ページに表示

そもそも試されたことを見るに、Ajaxを使用するのであれば画面遷移は不要です。
画面遷移しないのであれば、当然チェックボックスもそのままなので、チェック状態は維持されます。
チェック状態が維持されないというのであれば、恐らくsubmitの画面遷移がキャンセルされずに起きています。上記ソースをコピペして試しましたが、formにid「form」が指定されておらず、
$("#form").submit(function(){〜以降がちゃんと機能していませんでした。

その他、$("[name='check[]']:checked")もセレクタの指定が間違っています。
慣れないうちはブラウザの開発者ツールでJSのデバッグを一行ずつしながら確認していくことをお勧めします。またjQueryで要素を取ってこれるかどうかはconsoleでも確認できるので、処理が上手く行かないと思ったら、要素がきちんと取れているかどうかの確認もしましょう。

上記の場合、野菜であれば次のようにすればチェックされた要素が取れるはずです。
$('.vegetable input[type=checkbox]:checked')
valueだけ取りたい場合は、$('.vegetable input[type=checkbox]:checked').val();
とすれば取れます。

投稿 2017/11/28 00:00

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/28 18:22

    ご回答ありがとうございます。
    試したことに関しては引用しているので、実際は[name='check[]']:checkedをHTMLに合わせて検証しています。説明不足ですみません。
    整理していただいたおかげでどのように処理をしたらいいのか理解できました。consoleやvar_dumpを使用してじっくり検証してみます。ありがとうございました。

    キャンセル

  • 2017/11/29 09:01

    参考にしているところから単にコピペだけでは解決しませんよ。

    セレクタを合わせたり
    ポストパラメーターを合わせたりしないといけません

    キャンセル

  • 2017/11/29 10:41 編集

    num79kill様
    試したことに書いたソースコードはサイトの参考にしたコードを引用しているので、実際に検証している時にセレクタやポストパラメータを合わせて検証しています。(該当のソースコードに追記したような記述で)
    ここについては説明不足です。失礼いたしました。

    キャンセル

+1

ajax使った方がいい場面ですが、使わないとすればこうすればcheck状態は引き継げると思います。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>つぶやき</title>
</head>
<body>

<form method="post" action="/search/">
<div class="vegetable">
  <h2>野菜</h2>
  <input type="checkbox" name="vege[]" value="トマト"
    <?php if(isset($_POST['vege']) && in_array('トマト',$_POST['vege'])): ?>checked="checked"<?php endif; ?>>トマト
  <input type="checkbox" name="vege[]" value="ビーマン"
    <?php if(!$_POST || (isset($_POST['vege']) && in_array('ビーマン',$_POST['vege']))): ?>checked="checked"<?php endif; ?>>ピーマン 
  <input type="checkbox" name="vege[]" value="ジャガイモ"
    <?php if(isset($_POST['vege']) && in_array('ジャガイモ',$_POST['vege'])): ?>checked="checked"<?php endif; ?>>ジャガイモ 
</div>

<div class="fruit">
  <h2>フルーツ</h2>
  <input type="checkbox" name="fruit[]" value="りんご"
    <?php if(isset($_POST['fruit']) && in_array('りんご',$_POST['fruit'])): ?>checked="checked"<?php endif; ?>>りんご
  <input type="checkbox" name="fruit[]" value="オレンジ"
    <?php if(isset($_POST['fruit']) && in_array('オレンジ',$_POST['fruit'])): ?>checked="checked"<?php endif; ?>>オレンジ 
  <input type="checkbox" name="fruit[]" value="バナナ"
    <?php if(!$_POST || (isset($_POST['fruit']) && in_array('バナナ',$_POST['fruit']))): ?>checked="checked"<?php endif; ?>>バナナ 
</div>

<button class="submit-btn">送信</button>
</form>


</body>
</html>

投稿 2017/11/28 00:36

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/28 18:38

    ご回答ありがとうございます。
    ソースコードを試したのですが、チェックして送信しても受け渡しがうまくできずチェックされてない状態でした…。
    POSTがうまくいってないのかもしれないので、いろいろ試してみようと思います。ありがとうございました。

    キャンセル

  • 2017/11/29 09:06

    actionは自分自身にPOSTする場合は属性自体を削除するか配置場所を指定しないと齟齬がでるきが

    キャンセル

  • 2017/11/29 10:46

    num79kill様
    actionはフォームを設置しているページと検索結果ページが別々なので、actionに検索結果ページのディレクトリ名を書いてます。
    このactionについてまだまだ理解できてない事が多いですね…。ご指摘ありがとうございます。

    キャンセル

0

※命題のピーマンでわたす文字が「ビーマン」になっています
この手のタイプミスがデバッグの際に一番わかりにくいので気をつけて下さい

汎用的な考え方をするとこうします

<?PHP
$checked=[
  "vege"=>["トマト"=>"","ピーマン"=>"","ジャガイモ"=>""],
  "fruit"=>["りんご"=>"","オレンジ"=>"","バナナ"=>""],
  ];
$option=["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY];
$vege=filter_input(INPUT_POST,"vege",FILTER_DEFAULT,$option);
foreach($vege as $val){
  $checked["vege"][$val]=" checked=\"checked\"";
}
$veges=htmlspecialchars(implode("、",$vege));
$fruit=filter_input(INPUT_POST,"fruit",FILTER_DEFAULT,$option);
foreach($fruit as $val){
  $checked["fruit"][$val]=" checked=\"checked\"";
}
$fruits=htmlspecialchars(implode("、",$fruit));
print_r($checked);
print <<<eof
<form method="post">
  <div class="vegetable">
    <h2>野菜</h2>
<input type="checkbox" name="vege[]" value="トマト"{$checked["vege"]["トマト"]}>トマト
    <input type="checkbox" name="vege[]" value="ピーマン"{$checked["vege"]["ピーマン"]}>ピーマン 
    <input type="checkbox" name="vege[]" value="ジャガイモ"{$checked["vege"]["ジャガイモ"]}>ジャガイモ 
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
      <input type="checkbox" name="fruit[]" value="りんご"{$checked["fruit"]["りんご"]}>りんご
    <input type="checkbox" name="fruit[]" value="オレンジ"{$checked["fruit"]["オレンジ"]}>オレンジ 
    <input type="checkbox" name="fruit[]" value="バナナ"{$checked["fruit"]["バナナ"]}>バナナ 
  </div>
  <button class="submit-btn">送信</button>
</form>
<hr>
<div class="search-result">
  <h1>検索結果</h1>
  <h2>野菜</h2>
    <p>{$veges}</p>
  <h2>フルーツ</h2>
    <p>{$fruits}</p>
</div>

eof;
?>


※結果欄を追記しておきました

投稿 2017/11/28 10:42

編集 2017/11/28 12:22

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/28 18:48

    ご回答ありがとうございます。

    記述ミスの指摘と結果欄までソースコード書いていただきありがとうございました。
    試してみたらうまくいきました!
    それで実際には「野菜」「フルーツ」以外にもチェック項目がいくつかあって下記のコードを
    $checked=[
    "vege"=>["トマト"=>"","ピーマン"=>"","ジャガイモ"=>""],
    "fruit"=>["りんご"=>"","オレンジ"=>"","バナナ"=>""],
    ];

     ↓

    $checked=[];

    これに変えても大丈夫なのでしょうか?

    キャンセル

  • 2017/11/28 20:06

    各inputのnameにあわせた初期値を設定していますので
    項目が増えたらそれに対応する空の配列を用意した方がいいでしょう

    キャンセル

  • 2017/11/28 20:29

    質問に答えてくださってありがとうございます。

    あと、すみません。もう少しお付き合いください。
    書いてくださったソースコードはURLのパラメータに影響されるのでしょうか?
    jQueryを使って検索結果ページのURLのパラメータを付け加えているのですが、そのパラメータを付け加えるとうまくいかなくなってしまいました…。

    $option=["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY];
    $vege=filter_input(INPUT_POST,"vege",FILTER_DEFAULT,$option);
    ここの部分が関係しているのかと思って調べてみたのですが、いまいち理解ができていなくて…。

    キャンセル

  • 2017/11/28 21:15

    > 検索結果ページのURLのパラメータを付け加えている

    の処理がいまいちわかりません。
    getでパラメータを渡しているのでしょうか?
    今回データ渡はpostで行う前提だと思いますが、そのあたりの住み分けは考慮されていますか?
    一度パラメータ云々の部分、ソースを追記で提示されたほうがいいと思います

    キャンセル

  • 2017/11/28 23:11

    URLパラメータの処理について追記しました。
    チェックボックスのvalue値をjQueryの.val()で取得して、URLを書き換えるという処理です。
    URLは関係ないと思い、最初から省いてました…。すみません。

    キャンセル

  • 2017/11/28 23:17

    なんとなく言いたいことはわかりました
    私の例示はあくまでもページ遷移時に引き継ぐ処理をかいたものなので
    ajaxでのデータ取得については考え方をガラッと変えないといけないでしょう。

    キャンセル

  • 2017/11/28 23:36

    色々とありがとうございました。
    yambejp様の方法もあるのだと勉強させてもらったので、また機会があれば参考にさせていただきます。

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

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

  • PHP

    15159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11206questions

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

  • jQuery

    4888questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。