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

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

ただいまの
回答率

87.49%

formのチェック項目によって遷移先で出し分けをしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,569

score 96

http://5am.jp/javascript/form_change_javascript/

上記のサイトにあるサンプルソース(セレクトボックス)のようなものを実装しているのですが
ここのセレクトボックスで項目を変えると遷移先の内容を切り替わるようにしたいのですが可能でしょうか?

具体的にはセレクトボックスで選ばれたものによって遷移先のtableの中身が切り替わります。
切り替わる種類は3パターンのみです。
いずれも別々のcsvファイルになっています。(1つにまとめたほうがいい場合はそれでも構いません)
tableの中はcsvからテキストをPHPで取って来ています。
表の上には表のタイトルがありそれも切り替わるようにしたいです。(<h2>の中)

遷移先のページは同じURLですが、後ろにパラメータなど何か判別するものをつけるのは構いません。

上記のURLのサンプルソース(セレクトボックス)の例だと
「初めてを申し込む」選択時、紹介者に名前を入れて送信ボタン(サンプルにはないですが)を押した場合
Aのテーブルの中身を表示。
「2度目以降の利用」も同様。

ただ、紹介者に名前が入っていない場合は3パターン全てを表示。

もともと3つ用意しておいて、表示、非表示の方が簡単でしょうか?
いろいろわかりにくくて申し訳ございません。

よろしくおねがいします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • MeB

    2017/11/07 15:57

    セレクトボックスにある方にはまだPHPの記述はありません。jsでセレクトボックスの中身によってチェックする項目の数が変わったりするくらいです。遷移先はPHPでcsv読み込んでechoで対応する所に表示しているだけです・・・

    キャンセル

  • masaya_ohashi

    2017/11/07 15:59

    「遷移先のページは同じURL」とは、セレクトボックスのあるURLと遷移先が同じ、という意味なのか、3パターンの遷移先は全部同じURL、という意味でしょうか?

    キャンセル

  • MeB

    2017/11/07 16:02

    どちらもです。セレクトボックスのあるページとその遷移先のページ、この2ページで完結させたいと思っております。

    キャンセル

回答 2

+2

考え方が2つ

  • セレクトボックスで項目を選んだあとなんらかのサブミットをおこなうのであれば
    ただのformの送信です。セレクトボックスに付けられたnameに従って
    遷移先のデータは変化するでしょう。とうぜんそれは遷移先がやることです。

  • そうではなくセレクトボックスを選んだ瞬間にページが遷移する場合。
    たとえばlocation.hrefなどで移動するのであれば、今選んだセレクトボックスの
    nameと値を付加して与えれば、飛び先でそれに応じたデータが表示されます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+1

こんな感じです。セレクトボックスのあるほうのフォームから、PHPへパラメータを送り、$_REQUEST変数を使ってそのフォームのデータを読み込みます。

 セレクトボックス表示側

<form action="/view.php" method="GET">
  <select name="csv_name">
    <option value="aaa">
    <option value="bbb">
    <option value="ccc">
  </select>
</form>

 CSV表示側(view.phpとする)

echo "<h2>" . $_REQUEST['csv_name'] . "</h2>"; // $_REQUEST['【formから送られてきたデータ名】']でformから送られたデータが取れる
$filepath = $_REQUEST['csv_name'] . ".csv"; // ここはあなたの環境にあわせて読み込みたいcsv名になるようにする
$fp = fopen($filepath, 'r');
while (($data = fgetcsv($fp)) !== FALSE) {
  // $dataにはcsvの1行のデータが配列として入っている
}
fclose($fp);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/07 16:23 編集

    ありがとうございます!
    これで試してみます!
    現状セレクトボックスを変えるとそれに対応したチェックボックスがでるのですが
    どれにもチェックしていない時は3パターン全て表示というのは難しいという解釈でよろしいでしょうか?
    度々すみません。よろしくお願いいたします。

    キャンセル

  • 2017/11/07 16:26

    チェックボックスのほうの値は、「チェックされていればそのデータがフォームから送信される」ので、例えば<input type="check" name="check1" value="on">というチェックボックスにチェックが入っていれば$_REQUEST['check1']に'on'という文字列が、チェックが入っていなければそもそも$_REQUEST['check1']がない、という状態になります。それらをphp側でifによりチェックして、処理を分岐すればよいです。

    キャンセル

  • 2017/11/07 18:50

    返信が遅くなり申し訳ございません。
    色々考えた結果、デフォルト(セレクトボックスは関係なく、チェックボックスはチェックされていない状態)では3パターンの表を表示させる。
    チェックボックスにチェックが入っている場合は。セレクトボックスでaaaの時のチェックボックスを<input type="check" name="check1" value="click_a">、bbbの時のチェックボックスを<input type="check" name="check1" value="click_b">のような形にしてそれぞれを判断しCSV表示側でそれに対応した表のみを表示する形にしたいと思っております。
    数々の助言ありがとうございます!

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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