Laravel 5.5 -> Dynamically updating second dropdown, based on first dropdown.

LambDev

Hi All,

I'm creating a sample ad site for learning in Laravel. I need users to select a county, and then select a town where they are based. I have no idea to do this.

I have the main form page. This is where users fill in all the advert information.

So My View

@extends('layouts/main')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Advertise Your Ad</div>

                <div class="card-body">
                    <form method="POST" action="/createadvert">
                        @csrf

                        <!-- Address -->
                        <div class="form-group row">
                            <label for="address" class="col-md-3 col-form-label text-md-right">Address</label>
                            <div class="col-md-9">
                                <input id="Address" type="text" class="form-control{{ $errors->has('Address') ? ' is-invalid' : '' }}" name="address" value="{{ old('Address') }}" required autofocus>
                                @if ($errors->has('Address'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('Address') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <!-- County -->
                        <div class="form-group row">
                          <label for="county" class="col-md-3 col-form-label text-md-right">County</label>
                            <div class="col-md-9">
                              <select class ="form-control" id="county" name="county">
                                <option>Dublin</option>
                                <option>Galway</option>
                              </select>
                              @if ($errors->has('county'))
                                  <span class="invalid-feedback">
                                      <strong>{{ $errors->first('county') }}</strong>
                                  </span>
                              @endif
                            </div>
                        </div>


                        <!-- city -->
                        <div class="form-group row">
                          <label for="city" class="col-md-3 col-form-label text-md-right">city</label>
                            <div class="col-md-9">
                              <select class ="form-control" id="city" name="city">
                                <option>Howth</option>
                                <option>Sutton</option>
                              </select>
                              @if ($errors->has('city'))
                                  <span class="invalid-feedback">
                                      <strong>{{ $errors->first('city') }}</strong>
                                  </span>
                              @endif
                            </div>
                        </div>



                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\PropertyAdvert;

class AdvertisementController extends Controller
{
    public function index(){
      return view('pages/Advert/create');
    }

    public function store(Request $request){
      $Advert = new PropertyAdvert();

      $Advert::create(
        [
          "address" => $request->address,
          "county" => $request->county,
          "town" => $request->town,

        ]
      );

      return "Success. Your adveret has been published";
    }
}

Model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class PropertyAdvert extends Model
{
     protected $fillable = ["address", "county", "town",];
}

Migration

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePropertyAdvertsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('property_adverts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('address');
$table->string('county');
            $table->string('town');
            $table->string('type');
 
        });
    }

    
}

How/Where should I store the counties/towns
How would I link towns to counties so if I select Dublin as my county, I only get the towns in Dublin?

Any good tutorials around to find this, as I can;t find any.

Talisman

You want to build a faceted navigation - see Faceted navigation in PHP and MySQL.

Ideally you would implement the faceted navigation using a dedicated search engine such as SOLR, Elasticsearch or Algolia.

You need to think through your implementation before you embark on building it, because it's not as simple as it first seems. Your intention is to have a filter [Select County] -> [Select Town]. What happens when there is more than one town with the same name? In Ireland it happens more often than you might think. For instance there are over 170 "Newtown"s in Ireland - some years ago I worked on a major tourism project and relying upon a county\town facet proved to be a PITA when constructed from database tables.

In the end we implemented a taxonomy string e.g. "/Republic of Ireland/Dublin/Newtown" and in addition each asset stored the ID of the Country, County, Town etc. along with its GPS coordinates. The GPS coordinates were used to choose the correct Town ID when adding an asset to the database.

LambDev

Talisman wrote: »

You want to build a faceted navigation - see Faceted navigation in PHP and MySQL.

Ideally you would implement the faceted navigation using a dedicated search engine such as SOLR, Elasticsearch or Algolia.

You need to think through your implementation before you embark on building it, because it's not as simple as it first seems. Your intention is to have a filter [Select County] -> [Select Town]. What happens when there is more than one town with the same name? In Ireland it happens more often than you might think. For instance there are over 170 "Newtown"s in Ireland - some years ago I worked on a major tourism project and relying upon a county\town facet proved to be a PITA when constructed from database tables.

In the end we implemented a taxonomy string e.g. "/Republic of Ireland/Dublin/Newtown" and in addition each asset stored the ID of the Country, County, Town etc. along with its GPS coordinates. The GPS coordinates were used to choose the correct Town ID when adding an asset to the database.

Thanks for the advice.

It seems to be ridiculous hard, for something so simple. All I'm doing is allowing users to post advertisements.

And either my search queries on Google are bad, or it's hard to find good tutorials.

Buford T Justice

if its a simple learning exercise, then I'd be thinking of using some ajax bound to the change of the first dropdown to fetch a list for the second dropdown based on the value of the first, and then updating the second list with said result.

Talisman

For better usability you could invert the process. Use AJAX to implement a typeahead/autocomplete search for the town name. If the Town is in the database then you automatically know the County or the possible options to populate a drop down list.

For a demonstration of what I'm describing visit the following link and type the name of a town into the "where?" field on the form: Places to stay search

It's not difficult to implement the autocomplete feature:

Laravel autocomplete typeahead search example
Laravel 5 Autocomplete using Bootstrap Typeahead JS
Laravel 5 dynamic autocomplete search using select2

LambDev

Talisman wrote: »

For better usability you could invert the process. Use AJAX to implement a typeahead/autocomplete search for the town name. If the Town is in the database then you automatically know the County or the possible options to populate a drop down list.

For a demonstration of what I'm describing visit the following link and type the name of a town into the "where?" field on the form: Places to stay search

It's not difficult to implement the autocomplete feature:

Laravel autocomplete typeahead search example
Laravel 5 Autocomplete using Bootstrap Typeahead JS
Laravel 5 dynamic autocomplete search using select2

Brilliant suggestion. I have that implemented now. I may not have the relationship between towns and counties, but I can't come back to that if I feel I need at the end of the project.