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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

Laravel 5

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

Q&A

0回答

1979閲覧

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

tomoki9-29

総合スコア6

PHP

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

Laravel 5

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

0グッド

1クリップ

投稿2018/07/27 03:37

前提・実現したいこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問