skip to Main Content

current Url:
http://localhost:8000/filter-results?country_id=1&education_level_id=&employment_type_id=&language_id=&profession_id=&religion_id=1

how I wanted to looks like:
http://localhost:8000/filter-results?country_id=1&religion_id=1

how can I do that.
more details:
I have a filter view as a part of the home page which have 6 combobox for selecting a country, education level etc.. then in the controller i’m filtering the person based on these data and retriving the data to display it in worker list view.

the function responsible for filtering :

    public function filterResults(Request $request)
    {
        // Retrieve filter criteria from the request
        $countryId        = $request->input('country_id');
        $educationLevelId = $request->input('education_level_id');
        $employmentTypeId = $request->input('employment_type_id');
        $languageId       = $request->input('language_id');
        $personId         = $request->input('person_id');
        $professionId     = $request->input('profession_id');
        $religionId       = $request->input('religion_id');

        // Build the query based on the filter criteria
        $query = Person::query();

        // Add conditions based on the presence of each filter parameter
        if ($countryId) {
            $query->where('country_id', $countryId);
        }
        if ($educationLevelId) {
            $query->where('education_level_id', $educationLevelId);
        }
        if ($employmentTypeId) {
            $query->where('employment_type_id', $employmentTypeId);
        }
        if ($languageId) {
            $query->whereHas('languages', function ($query) use ($languageId) {
                $query->where('language_id', $languageId);
            });
        }
        if ($personId) {
            $query->where('person_id', $personId);
        }
        if ($professionId) {
            $query->where('profession_id', $professionId);
        }
        if ($religionId) {
            $query->where('religion_id', $religionId);
        }

        // Eager load relationships
        $query->with(['country', 'educationLevel', 'employmentType', 'languages', 'profession', 'religion']);

        // Paginate the results with 10 items per page
        $perPage = 10;

        // Resolve the current page from the query parameters or default to 1
        $currentPage = $request->input('page') ?? 1;

        // Get the results
        $filteredResults = $query->paginate($perPage, ['*'], 'page', $currentPage);

        // Get all countries and professions (if needed for the view)
        $additionalData = [
            'countries' => Country::all(),
            'educationLevels' => EducationLevel::all(),
            'employmentTypes' => EmploymentType::all(),
            'languages' => Language::all(),
            'professions' => Profession::all(),
            'religions' => Religion::all(),
        ];

        return view('workerList.index', [
            'filteredResults' => $filteredResults,
        ] + $additionalData);
    }

    /**
     * Build query with filters.
     *
     * @param IlluminateDatabaseEloquentBuilder $query
     * @param array $filters
     * @return IlluminateDatabaseEloquentBuilder
     */
    private function buildQueryWithFilters($query, array $filters)
    {
        foreach ($filters as $key => $value) {
            $query->when($value, function ($query) use ($key, $value) {
                return $query->where($key, $value);
            });
        }

        return $query;
    }

    /**
     * Get additional data for the view.
     *
     * @return array
     */
    private function getAdditionalData()
    {
        return [
            'countries' => Country::all(),
            'educationLevels' => EducationLevel::all(),
            'employmentTypes' => EmploymentType::all(),
            'languages' => Language::all(),
            'professions' => Profession::all(),
            'religions' => Religion::all(),
        ];
    }

route:

Route::get('/filter-results', [FilterController::class, 'filterResults'])->name('filter.results');

blade html:

<form method="get" action="{{ route('filter.results') }}" class="container p-4 rounded">
    <div class="row">
        <div class="col-lg-4">
            <label for="country">Country:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="country_id" id="country">
                <option value="">All</option>
                @foreach ($countries as $country)
                    <option value="{{ $country->id }}" >{{ $country->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-lg-4">
            <label for="educationLevel">Education level:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="education_level_id" id="educationLevel">
                <option value="">All</option>
                @foreach ($educationLevels as $educationLevel)
                    <option value="{{ $educationLevel->id }}">{{ $educationLevel->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-lg-4">
            <label for="employmentType">Employment type:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="employment_type_id" id="employmentType">
                <option value="">All</option>
                @foreach ($employmentTypes as $employmentType)
                    <option value="{{ $employmentType->id }}">{{ $employmentType->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-lg-4">
            <label for="language">Language:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="language_id" id="language">
                <option value="">All</option>
                @foreach ($languages as $language)
                    <option value="{{ $language->id }}">{{ $language->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-lg-4">
            <label for="profession">Profession:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="profession_id" id="profession">
                <option value="">All</option>
                @foreach ($professions as $profession)
                    <option value="{{ $profession->id }}">{{ $profession->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-lg-4">
            <label for="religion">Religion:</label>
            <select class="form-control input-lg b-0 br-1 border-light rounded-0" name="religion_id" id="religion">
                <option value="">All</option>
                @foreach ($religions as $religion)
                    <option value="{{ $religion->id }}">{{ $religion->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <button type="submit" class="btn btn-block btn-primary">Find workers</button>
        </div>
    </div>
</form>

2

Answers


  1. Chosen as BEST ANSWER

    In the end I solved it using vanilla JS:

    function submitForm() {
        // Get selected values
        let countryId = document.getElementById("country").value;
        let educationLevelId = document.getElementById("educationLevel").value;
        let employmentTypeId = document.getElementById("employmentType").value;
        let languageId = document.getElementById("language").value;
        let professionId = document.getElementById("profession").value;
        let religionId = document.getElementById("religion").value;
    
        // Build the filtered URL
        let filteredUrl = filterResultsRoute + "?";
        if (countryId) filteredUrl += "country_id=" + countryId + "&";
        if (educationLevelId)
            filteredUrl += "education_level_id=" + educationLevelId + "&";
        if (employmentTypeId)
            filteredUrl += "employment_type_id=" + employmentTypeId + "&";
        if (languageId) filteredUrl += "language_id=" + languageId + "&";
        if (professionId) filteredUrl += "profession_id=" + professionId + "&";
        if (religionId) filteredUrl += "religion_id=" + religionId + "&";
    
        // Remove the trailing '&' if present
        filteredUrl = filteredUrl.replace(/&$/, "");
    
        // Set the form action dynamically
        document.getElementById("filterForm").action = filteredUrl;
    
        // Submit the form
        document.getElementById("filterForm").submit();
    
        // Navigate to the filtered URL
        window.location.href = filteredUrl;
    }
    
    

  2. You need to use js to do this

    <button type="submit" class="btn btn-block btn-primary">Find workers</button>
    

    change this to

    <button type="submit" id="form_submit" class="btn btn-block btn-primary">Find workers</button>
    
    //add is to form id="form_filter"
    //add this in the script file
    
    $("#form_submit").click(function(e) {
    e.preventDefault();
      var params_data = {}
       if($("#country").val()) {
        params_data.country_id = $("#country").val();
       }
    
       if($("#educationLevel").val()) {
        params_data.education_level_id = $("#educationLevel").val();
       }
    
       if($("#employmentType").val()) {
        params_data.employment_type_id = $("#employmentType").val();
       }
       
    window.location.href = $("#form_filter").attr('action')+'?'+$.param(params_data);
    });
    
    
    Basic idea is to change get data using js 
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search