chained dropdown selection

it's ajax . you must have your own route for every dropdown that changes anothers, so you detect dropdown change with jquery and then get next dropdown content with ajax fire. any question ??

I have done this in the recent past. Here is how i did it..

1. Create two select boxes, one for countries and the other for cities.
2. Populate the countries in the first select box.
3. In the onchange event of the select box, use the id of the country to send as a get parameter to the same page
4. Use that id to get the list of cities in that country and load the same view populating the list of cities in the second select box

Hope it helps

@rohit can you show me your onchange code?

@vipin93 It would be "window.location.href = url_to_your_page/country_id". This should redirect you to the page with the country id as the get parameter.

@rohit i tried like

 $('#country').on('change',function(e){       //state change
        console.log(e);
         var cat_id = e.target.value;

        $.get('ajax-subcat?cat_id=' + cat_id, function(data){

              $('#state').empty();

            $.each(data, function(edit, subcatObj){
                  
                  $('#state').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

            });
        });

    });

and 

Route::get('ajax-subcat', function(){

  $cat_id = Input::get('cat_id');

  $states = State::where('country_id', '=', $cat_id)->get();

  return Response::json($states);
});

and View 
 <h3>Shop Address:</h3>
                 
                 <div class="form-group">
                    <lable for="country_id">Select Country:</lable>
                    <select name="country_id" id="country" class="form-control">
                      @foreach($countries as $country )
                      <option value="{{ $country->id }}">{{ $country->name }}</option>
                       @endforeach
                    </select> 
                  </div>


                             
                 <div class="form-group">
                    <lable for="state">Select State:</lable>
                 
                    <select name="state" id="state" class="form-control">
                     
                      <option value=""></option>
                    
                    </select> 
                  </div>

And it working in normal form method but when i tried in Form Binding method It not working showing in elements is 404 not found any idea

@vipin93 Can you share the code and errors of the part which is not working so that I can understand that part of the problem?

@vipin93 i tried what you posted above i dont see any connection or where the cat_id was used? it does'nt work on me, when i select country no state is being shown

@dinis

Route::get('ajax-subcat', function(){

  $cat_id = Input::get('cat_id');

  $states = State::where('country_id', '=', $cat_id)->get();

  return Response::json($states);
});

This will be in your route file not in javascript

@vipin93 yes i know, but what is the use of the cat_id there? in what element is it supposed to get data from?

@rohit

here is my javascript

$('#country').on('change',function(e){       //state change
        console.log(e);
         var cat_id = e.target.value;

        $.get('ajax-subcat?cat_id=' + cat_id, function(data){

              $('#state').empty();

            $.each(data, function(edit, subcatObj){
                  
                  $('#state').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

            });
        });

    });
 

  $('#state').on('change',function(e){         //distric change
        console.log(e);
         var cat_id = e.target.value;

        $.get('ajax-subcatt?cat_id=' + cat_id, function(data){

              $('#district').empty();

            $.each(data, function(edit, subcatObj){

                  $('#district').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

            });
        });

    });



   $('#district').on('change',function(e){        //city change
        console.log(e);
         var cat_id = e.target.value;

        $.get('ajax-subcattt?cat_id=' + cat_id, function(data){

              $('#city').empty();

            $.each(data, function(edit, subcatObj){

                  $('#city').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

            });
        });

    });


   $('#city').on('change',function(e){           //block change
        console.log(e);
         var cat_id = e.target.value;

        $.get('ajax-subcatttt?cat_id=' + cat_id, function(data){

              $('#block').empty();

            $.each(data, function(edit, subcatObj){

                  $('#block').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

            });
        });

    });

here is my route where we fetching state,city and so on

Route::get('ajax-subcat', function(){

  $cat_id = Input::get('cat_id');

  $states = State::where('country_id', '=', $cat_id)->get();

  return Response::json($states);
});


Route::get('ajax-subcatt', function(){

  $cat_id = Input::get('cat_id');

  $districts = District::where('state_id', '=', $cat_id)->get();

  return Response::json($districts);
});

Route::get('ajax-subcattt', function(){

  $cat_id = Input::get('cat_id');

  $cities = City::where('district_id', '=', $cat_id)->get();

  return Response::json($cities);
});

Route::get('ajax-subcatttt', function(){

  $cat_id = Input::get('cat_id');

  $blocks = Block::where('city_id', '=', $cat_id)->get();

  return Response::json($blocks);
});

and my Form

 <h3>Shop Address:</h3>
   {{  Form::model($user->profile, ['method' => 'PATCH', 'route' => ['profile.update', $user->username] ) }}
                 <div class="form-group">
                    <lable for="country_id">Select Country:</lable>
                    <select name="country_id" id="country" class="form-control">
                      @foreach($countries as $country )
                      <option value="{{ $country->id }}">{{ $country->name }}</option>
                       @endforeach
                    </select> 
                  </div>


                             
                 <div class="form-group">
                    <lable for="state">Select State:</lable>
                 
                    <select name="state" id="state" class="form-control">
                    
                      <option value=""></option>
                   
                    </select> 
                  </div>
                  


                 <div class="form-group">
                    <lable for="district">Select District:</lable>
                    <select name="district" id="district" class="form-control">
                    
                      <option value=""></option>
                   
                    </select> 
                  </div>

                 <div class="form-group">
                    <lable for="city">Select City:</lable>
                    <select name="city" id="city" class="form-control">
                    
                      <option value=""></option>
                   
                    </select> 
                  </div>

                  <div class="form-group">
                    <lable for="block">Select Block:</lable>
                    <select name="block" id="block" class="form-control">
                    
                      <option value=""></option>
                    
                    </select> 
                  </div>
 {{ Form::submit('Update Profile', ['class' => 'btn btn-primary']) }}
{{ Form::close() }}

and my controller

public function edit($username)
    {
            $user = User::whereUsername($username)->firstOrFail();

               $countries = Country::all();

        return View::make('profile.edit', compact('countries'))->withUser($user)->with('title' , 'Edit profile');
    }

here is my script

` $('#country').on('change',function(e){ //state change console.log(e); var cat_id = e.target.value;

    $.get('ajax-subcat?cat_id=' + cat_id, function(data){

        $('#state').empty();

        $.each(data, function(edit, subcatObj){

            $('#state').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');

        });
    });

});

here is my view `

                        <div class="form-group">
                            <lablel for="country_id">Select Country:</lablel>
                            <select name="country_id" id="country" class="form-control">
                                @foreach($countries as $country )
                                    <option value="{{ $country->countryCODE }}">{{ $country->countryNAME }}</option>
                                @endforeach
                            </select>
                        </div>



                        <div class="form-group">
                            <lablel for="state">Select State:</lablel>

                            <select name="state" id="state" class="form-control">

                                <option value=""></option>

                            </select>
                        </div>

                    </form>

$cat_id = Input::get('cat_id');

$states = City::where('cityCOUNTRYCODE', '=', $cat_id)->get();

return Response::json($states);

@dinis cat_id hold the your Country Id

@vipin93 yeah but it does not work on me, when i select country the city selection is not being populate

@dinis can you show me your form and other stuff

@vipin93 where is the error occurring and what is the error?

@vipin93 i posted it already the view, route, and the script... anyway can i have the dump sql file of your country, state, city?

@dinis here is sql table Country table like-> id name and State table -> id name country_id you can insert as you wish

@vipin93 i mean the data content of your sql table country, state, and city

i cant still make it work to show the city after selecting country

@rohit my errors when i see in my chrome it shows like " GET http://flash.dev/profile/minima18/ajax-subcat?cat_id=1 403 (Forbidden)" , "XHR finished loading: GET "http://flash.dev/profile/minima18/ajax-subcat?cat_id=1".

@dinis country table id-1 name-India, id-2 name US and my state table id-1 name-Punjab country_id-1, id-2 name-NewYork country_id-2

@vipin93 looks like you have some permission error. Check the permissions for your folder and can you copy the entire error thats thrown and paste it please?

@rohit my entire errors

m.Event http://flash.dev/profile/minima18/ajax-subcat?cat_id=3 Failed to load resource: the server responded with a status of 403 (Forbidden)

ajax.js:4 http://flash.dev/profile/minima18/ajax-subcat?cat_id=3

m.Event {originalEvent: Event, type: "change", isDefaultPrevented: function, timeStamp: 1424963230496, jQuery1112021480327821336687: true…}

jquery.min.js:4 GET http://flash.dev/profile/minima18/ajax-subcat?cat_id=1 403 (Forbidden) jquery.min.js:4 XHR finished loading: GET "http://flash.dev/profile/minima18/ajax-subcat?cat_id=1".

@vipin93 this is a permission problem. Try changing permissions of your project folder to 644.

@rohit how to change permissions may be it possible my form is before auth and my fetching Route i dont have any kind of filter ?

@vipin93 Which OS are you using?

Windows-7

@vipin93 try this on your project folder

http://www.wikihow.com/Change-File-Permissions-on-Windows-7

@rohit same problem nothing changed!!

@rohit what about your code have you see similar any code on webpage if you see plz share link?

@vipin93 Sure. If I find some reference, will share it with you. I would recommend trying the normal method like I said earlier without any AJAX. It should just work just fine. Try with only country and state. When that starts to work, then expand to district, city and so on.