前提・実現したいこと
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
あなたの回答
tips
プレビュー