Javascript Dynamic Dropdown Form

replied 9 years ago

The first thing I see that can cause issues is that you're creating the state dropdown like this:

    {{ Form::select('state', $states) }}

This doesn't give the select tag an ID, and you are later trying to use $('#state') as a selector. That would fail if there is no id="state" on the dropdown. Try tris:

    {{ Form::select('state', $states, null, ['id' => 'state']) }}

Last updated 1 year ago.

0

awtprod

replied 9 years ago

Thanks for the tip! I tried that but nothing changed.

Last updated 1 year ago.

0

mcraz

replied 9 years ago

Did you check the output of the controller method. Is it the way you want it to be ?

Also the foreach you implemented can be written as

DB::table('courts')->where('state', $states)->lists('states', 'id');

Last updated 1 year ago.

0

awtprod

replied 9 years ago

mcraz said:

Did you check the output of the controller method. Is it the way you want it to be ?

Also the foreach you implemented can be written as
DB::table('courts')->where('state', $states)->lists('states', 'id');

Yeah. The controller method works fine. This is what it outputs:

{"1":"Adams County Superior Court","2":"ASOTIN COUNTY SUPERIOR COURT","3":"Benton County Superior Court","4":"Chelan County Superior Cour","5":"Clallam County Superior Court","6":"Clark County Superior Court","7":"Columbia County Superior Court","8":"Cowlitz County Superior Court","9":"Douglas County Superior Court","10":"Ferry County Superior Court","11":"Franklin County Superior Court","12":"Garfield County Superior Court","13":"Grant County Superior Court","14":"Grays Harbor County Superior Court","15":"Island County Superior Court","16":"Jefferson County Superior Court","17":"King County Superior Court","18":"Kitsap County Superior Court","19":"Kittitas County Superior Court","20":"Klickitat County Superior Court","21":"Lewis County Superior Court","22":"Lincoln County Superior Court","23":"Mason County Superior Court","24":"Okanogan County Superior Court","25":"Pacific County Superior Court","26":"Pend Oreille County Superior Court","27":"Pierce County Superior Court","28":"San Juan County Superior Court","29":"Skagit County Superior Court","30":"Skamania County Superior Court","31":"Snohomish County Superior Court","32":"Spokane County Superior Court","33":"Stevens County Superior Court","34":"Thurston County Superior Court","35":"Wahkiakum County Superior Court","36":"Walla Walla County Superior Court","37":"Whatcom County Superior Court","38":"Whitman County Superior Court","39":"Yakima County Superior Court"}

Last updated 1 year ago.

0

firtzberg

replied 9 years ago

Then your controller doesn't work fine for what you need. The controller should return a JSON array. Each element in the array should have an id and value.

[{id:1, value:"Adams County Superior Court"}, {id:2, value:"ASOTIN COUNTY SUPERIOR COURT"}, ...]

You achieve it with this controller method

public function getCourts($id)
     {
    $states = DB::table('states')->where('name', $id)->pluck('abbrev');
    $courts = DB::table('courts')->where('state', $states)->get();
        $options = array();

        foreach ($courts as $court) {
            $options += array('id' => $court->id, 'value' => $court->court);
        }

        return Response::json($options);
     }

Inside the javascript you populate the dropdown like this

                $.each(data, function(index, value) {
                    $courts.append('<option value="' + value.id+'">' + value.value + '</option>');
                });

No garantee

Last updated 1 year ago.

0

arihtakid

replied 9 years ago

Solution

I'm using this code in my app

Don't forget to add jquery to your project

in view:

<script type="text/javascript" src="{{ asset('js/jquery-1.10.2.js') }}"></script>
<script>
jQuery(document).ready(function($) {
		$('#province').change(function(){
			$.get("{{ url('api/getregency')}}", { option: $('#province').val() }, 
			function(data) {
				var numbers = $('#regency');
				numbers.empty();
				$.each(data, function(key, value) {   
					numbers .append($("<option></option>")
					.attr("value",key)
					.text(value)); 
				});
			});
		});
}
</script>

Route

Route::get('api/getregency', 'RegencyController@listregency');

And then Controller

<?php
class RegencyController extends BaseController
{
    public function listregency()
	{
		$input = Input::get('option');
		$numbers = DB::table('MASTER_REGENCY')
		->where('province_id', $input)
		->orderBy('id', 'asc')
		->lists('regency_name','id');

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

Last updated 9 years ago.

0

Moderators