Auto populate Dropdown with jQuery AJAX in Laravel

Autopopulating values require when need to load records on child element based on parent element value.


Element values replace with new items whenever parent element value changes.

In this tutorial, I show how you can auto-populate dropdown with jQuery AJAX in Laravel.


1. Database Configuration

Open .env file.

Specify the host, database name, username, and password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

2. Table structure

  • Create departments and employees table using migration and add some records.
php artisan make:migration create_departments_table
php artisan make:migration create_employees_table
  • Now, navigate to database/migration/ directory from the project root.
  • Find a PHP file which ends with create_departments_table and open it.
  • Define the table structure in the up() method.
public function up()
{ Schema::create('departments', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); });
}
  • Similarly, find a PHP file which ends with create_employees_table and open it.
  • Define the table structure in the up() method.
public function up()
{ Schema::create('employees', function (Blueprint $table) { $table->id(); $table->string('username'); $table->string('name'); $table->string('email'); $table->integer('department'); $table->timestamps(); });
}
  • Run the migration –
php artisan migrate
  • The table is been created and I added some records in it.

3. Model

Create 2 Models –

Departments –

php artisan make:model Departments
  • Specify mass assignable Model attributes – name using the $fillable property.

Completed Code

<?php namespace App; use Illuminate\Database\Eloquent\Model; class Departments extends Model
{ protected $fillable = [ 'name' ]; }

Employees –

php artisan make:model Employees
  • Specify mass assignable Model attributes – username, name, email, and department using the $fillable property.

Completed Code

<?php namespace App; use Illuminate\Database\Eloquent\Model; class Employees extends Model
{ protected $fillable = [ 'username','name','email','department' ]; }

4. Controller

Create a DepartmentsController controller.

php artisan make:controller DepartmentsController

Import Departments and Employees Model.

Here, create two methods –

  • index – Fetch all records from departments table and assign in $departmentData['data'].

Load index view and pass $departmentData.

  • getEmployees – This method used to handle the AJAX request. Fetch records from employees table where the department = $departmentid.

Return $userData Array in JSON format.

Completed Code

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Departments;
use App\Employees; class DepartmentsController extends Controller
{ public function index(){ // Fetch departments $departmentData['data'] = Departments::orderby("name","asc") ->select('id','name') ->get(); // Load index view return view('index')->with("departmentData",$departmentData); } // Fetch records public function getEmployees($departmentid=0){ // Fetch Employees by Departmentid $empData['data'] = Employees::orderby("name","asc") ->select('id','name') ->where('department',$departmentid) ->get(); return response()->json($empData); }
}

5. Route

Open routes/web.php file.

Here, define two routes –

  • /
  • /getEmployees/{id} – This route use in jQuery AJAX request to get employees list.
<?php Route::get('/', '[email protected]'); // localhost:8000/
Route::get('/getEmployees/{id}', '[email protected]');

6. View

Create a new index.blade.php file in resources/views/ directory.

HTML –

Create two <select > elements –

  • In the first <select > display departments name by looping on $departmentData['data'].
  • The second <select > is used to display employee names according to the selected department using jQuery.

jQuery –

Define change event on the first dropdown (<select id='sel_depart'>).

Read selected value and empty the second <select id='sel_emp'> element all options except first.

Send AJAX GET request to 'getEmployees/' and also pass id value.

On successful callback check response length if it is greater than 0 then loop on response. Create options and append in #sel_emp selector.

Completed Code

<!DOCTYPE html>
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <!-- Department Dropdown --> Department : <select id='sel_depart' name='sel_depart'> <option value='0'>-- Select department --</option> <!-- Read Departments --> @foreach($departmentData['data'] as $department) <option value='{{ $department->id }}'>{{ $department->name }}</option> @endforeach </select> <br><br> <!-- Department Employees Dropdown --> Employee : <select id='sel_emp' name='sel_emp'> <option value='0'>-- Select Employee --</option> </select> <!-- Script --> <script type='text/javascript'> $(document).ready(function(){ // Department Change $('#sel_depart').change(function(){ // Department id var id = $(this).val(); // Empty the dropdown $('#sel_emp').find('option').not(':first').remove(); // AJAX request $.ajax({ url: 'getEmployees/'+id, type: 'get', dataType: 'json', success: function(response){ var len = 0; if(response['data'] != null){ len = response['data'].length; } if(len > 0){ // Read data and create <option > for(var i=0; i<len; i++){ var id = response['data'][i].id; var name = response['data'][i].name; var option = "<option value='"+id+"'>"+name+"</option>"; $("#sel_emp").append(option); } } } }); }); }); </script> </body>
</html>


7. Conclusion

Define change event on the parent element and according to the selected value fetch records for child element with jQuery AJAX.

You can modify the code if you want to do this with more than two dropdowns. For this, you need to define change event accordingly and fetch records with jQuery AJAX.

Related Posts