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

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

ただいまの
回答率

90.53%

  • PHP

    20265questions

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

  • Laravel 5

    1872questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

検索結果の該当件数をリアルタイムに表示させたい

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 125

tomoki9-29

score 2

前提・実現したいこと

http://sumaity.com/chintai/tokyo/?lid=smt10008 
このサイトの検索フォームのように、項目を選択するだびに該当件数を表示させることが最終目的です。

ですが、とりあえず選択したチェックボックスの値を画面に表示させようとしたところうまくいきませんでした。

jQueryのAjaxを使って複数選択されたチェックボックスの値をPOSTする方法は以下のサイトを参考にしました。
・http://d.hatena.ne.jp/tech-tech/20100920/1284992262

Laravelを使った、ajax・jqueryでのPOSTの方法を以下のサイトを参考しました。
・https://tababanana.com/laravelajaxpost/#heiseiphp

Laravel初心者ですが、宜しくお願い致します。

試したこと

web.php

Route::get('/', 'OutputCompanyDataController@getIndex')->name('outputCompanyData.index');
Route::any('countDB','OutputCompanyDataController@exchange');

OutputCompanyDataController.php

//省略
use Input;
use Response;
//省略

class OutputCompanyDataController extends Controller
{
    public function getIndex()
    {
        //省略
    }

    public function exchange()
    {
        $countCompanyData=Input::get('checks'); // countCompanyData.jsから値を受け取る
        return Response::make($countCompanyData); // countCompanyData.jsに値を返す
    }

}

app.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Company Data</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Flat UI -->
        <link rel="stylesheet" href="{{ asset('dist/css/vendor/bootstrap/css/bootstrap.min.css') }}"><!-- Loading Bootstrap -->
        <link rel="stylesheet" href="{{ asset('dist/css/flat-ui.min.css') }}"><!-- Loading Flat UI -->
        <link rel="stylesheet" href="{{ asset('css/style.css') }}"><!--Bootstrap theme(Starter)-->
        <script src="{{ asset('dist/js/vendor/jquery.min.js') }}"></script>
        <script src="{{ asset('dist/js/vendor/video.js') }}"></script>
        <script src="{{ asset('dist/js/flat-ui.min.js') }}"></script>
        <script src="{{ asset('assets/js/prettify.js') }}"></script>
        <script src="{{ asset('assets/js/application.js') }}"></script>
        <script>
            videojs.options.flash.swf = "{{ asset('dist/js/vendors/video-js.swf') }}"
        </script>

        <!-- font-awesome -->
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->

        <script>

            //------------------------------------------------------
            // 検索画面:チェックボックスで選択
            //------------------------------------------------------

            $(function() {

                //各サイトの業種のチェックボックスの引数を指定し、関数を呼び出す
                checkbox('#large_industry_riku','.check_large_industry_riku');
                checkbox('#large_industry_DODA','.check_large_industry_DODA');
                checkbox('#large_industry_mynavi','.check_large_industry_mynavi');
                checkbox('#large_industry_Bunnavi','.check_large_industry_Bunnavi');
                checkbox('#large_industry_cel','.check_large_industry_cel');

                //各職種のチェックボックスの引数指定し、関数を呼び出す
                checkbox('#large_job_riku','.check_large_job_riku');
                checkbox('#large_job_DODA','.check_large_job_DODA');
                checkbox('#large_job_mynavi','.check_large_job_mynavi');

                //各地域・都道府県のチェックボックスの引数指定し、関数を呼び出す
                @foreach( App\Prefecture::regions() as $region)
                    checkbox('#prefecture_{{$region->region_id}}', '.check_prefecture_{{$region->region_id}}');
                @endforeach



                $('.check').on('click', function() {
                    if ($(".check:not(:checked)").size() == 0) {
                        allCheck('#all');
                    } else {
                        allRemove('#all');
                    }
                });
                function checkbox(id_name,class_name){
                    $(id_name).on('click', function() {
                        if ($(this).prop('checked')) {
                            allCheck(class_name);
                        } else {
                            allRemove(class_name);
                        }
                    });
                }
                function allCheck(value) {
                    $(value).prop('checked', true);
                }
                function allRemove(value) {
                    $(value).prop('checked', false);
                }
            });
        </script>

        //追加したコードはここからです↓-------------------------------------------------------------------------------
        <script>
            $(function(){

                $('input').change(function() {     //inputクリックで発生

                    var checks=[]; //空の配列を用意

                    $("[name='large_industries_name_rikunavi[]']:checked").each(function(){

                        checks.push(this.value); //チェックのついているinputのvalueを全て配列に格納

                    });
                    $.ajax({ //ajaxによる非同期通信発生

                        type: "POST", //POST送信でデータを受け渡す
                        url: "countDB", // countDBにアクセスしてcon.phpが発動

                        //分からない
                        data : {"checks" : checks }, //配列のデータを送る

                        success: function(hoge) {//接続が成功

                            {$("#result").val(hoge)} //該当件数を表示

                        },

                        error: function(XMLHttpRequest,textStatus,errorThrown) {//接続が失敗

                            alert('エラーです!'); //エラーを表示

                        }

                    });

                    return false;

                });
            });
        </script>
      //追加したコードはここまでです↑-------------------------------------------------------------------------------
    </head>

    <body>
    @include('commons.navbar')
    @yield('content')
    </body>
    @include('commons.footer')

</html>

index.blade.php

@extends('layouts.app')

@section('content')
@include('view_function.mark_by_old_choice')

    <h3 class="index">会社情報 出力画面</h3>

    //今回追加したコードはここからです↓-------------------------------------------------------------------------------
    <div id="result"></div>
  //今回追加したコードはここまでです↑-------------------------------------------------------------------------------

    <div>
        @if (session('err_msg'))
            <div class="alert alert-danger">{{ session('err_msg') }}</div>
        @endif
    </div>
    <div class="contents">
        <form method="POST" action="/contact" name=Industries>
            <div class="col-sm-12">
                <table class="table table-bordered" style="table-layout:fixed";>
                    <thead>
                        <tr>
                            <th class="middle danger" colspan="8">業種</th>
                        </tr>
                    </thead>
                    <tr>
                        <td id="w180"><label id="fs18" for="large_industry_riku">リクナビ</label></td>
                        <td colspan="7">
                            <label id="fs18"><input type="checkbox" id="large_industry_riku">業種すべて</label>
                            @foreach($large_industries_name_rikunavi as $data)
                                <label><input type='checkbox' name="large_industries_name_rikunavi[]" value="{{$data->large_industries_id}}" class="check_large_industry_riku" @php mark_by_old_choice('large_industries_name_rikunavi',$data->large_industries_id) @endphp >{{$data->large_industries_name}}</label>
                            @endforeach
                        </td>
                    </tr>
                  //(省略)
                </table>
            </div>
            <input type="submit" id="submit" class="btn btn-hg btn-primary" value="CSV出力">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
        </form>
    </div>
@endsection
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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

  • PHP

    20265questions

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

  • Laravel 5

    1872questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。