在Laravel中将get参数作为漂亮的URL发送到搜索表单时出现问题

Question

I have search form to list properties/ads through certain criteria (city, price, quadrature, property type). I am trying to get pretty url like this for example

project/search/city/Madrid/price/10000_50000/quadrature/50_150/propertyType/flat

instead of this, like it is now when I click submit

project/search?_token=mCwLL58vOxGHtxEBmntPPcks7nV9n3DHXCNKt7hE&city=Madrid&min_price=10000&max_price=50000&min_quadrature=50&max_quadrature=150&propertyType=flat

I am trying this with javascript and if I am not mistaken I need to get in my 'form action' attribute path as a string. Any help is appreciated, because I'm fairly new in Laravel. Here is my code

search.blade.php

<form id="searchForm" action="/search" method="GET">

  <div class="row">
    <div class="col-md-5 mb-3">
      <label>City</label>
      <input name="city" list="result" id="input" class="form-control">
      <datalist id="result"></datalist>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 mb-6">
      <label>Price</label>
      <input type="number" name="min_price" class="form-control" placeholder="Min Price">
      <input type="number" name="max_price" class="form-control" placeholder="Max Price">
    </div>
    <div class="col-md-6 mb-6">
      <label>Quadrature</label>
      <input type="number" name="min_quadrature" class="form-control" placeholder="Min quadrature">
      <input type="number" name="max_quadrature" class="form-control" placeholder="Max quadrature">
    </div>
  </div>

  <hr class="mb-4">

  <div class="row">
    <div class="col-md-5 mb-6">
      <h5>Property type</h4>
        <div class="d-block my-3 ">
          <div class="custom-control custom-radio">
            <input id="house" name="propertyType" value="house" type="radio" class="custom-control-input">
            <label class="custom-control-label" for="house">House</label>
          </div>
          <div class="custom-control custom-radio">
            <input id="flat" name="propertyType" value="flat" type="radio" class="custom-control-input">
            <label class="custom-control-label" for="flat">Flat</label>
          </div>
  </div>

    <hr class="mb-4">

    <button class="btn btn-primary btn-lg btn-block">Search</button>

</form>

<script>

    $( document ).ready(function() {
      document.getElementById('searchForm').submit = function (event)
      {
        event.preventDefault();

        var city = document.querySelectorAll('input[name="city"]')[0];
        var price = document.querySelectorAll('input[name="price"]')[1];
        var quadrature = document.querySelectorAll('input[name="quadrature"]')[2];
        var propertyType = document.querySelectorAll('input[name="propertyType"]')[3];
        window.location.href = this.action + '/' +  encodeURIComponent(city.value) + encodeURIComponent(price.value) + encodeURIComponent(quadrature.value) + encodeURIComponent(propertyType.value);
      };
    });

  </script>

web.php

Route::get('/search', 'CategoryController@index');

Route::get('/search/city/{city}/price/{price}/
quadrature/{quadrature}/propertyType/{propertyType}', 'CategoryController@search');

CategoryController.php

<?php
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class CategoryController extends Controller
{
    public function index()
    {
        $data = \DB::table('properties');
        return view('categories.search', compact('data'));
    }

    public function search($propertyType, $propertyBidAsk, $propertyPayment, $city, $price, $quadrature, Request $request)
    {
        $data = \DB::table('properties');

        if ($request->city) {
            $data = $data->where('city', 'LIKE', "%" . $request->city . "%");
        }

        if ($request->min_price && $request->max_price ) {
            $data = $data->where('price', '>=', $request->min_price)
                     ->where('price', '<=', $request->max_price);
        }

        if ($request->min_quadrature && $request->max_quadrature ) {
            $data = $data->where('quadrature', '>=', $request->min_quadrature)
                     ->where('quadrature', '<=', $request->max_quadrature);
        }

        $data = $data->paginate(10);

        return view('categories.search', compact('data'));
    }

}

Answer 1

They are several problems with your script.

1. Price is not defined in your HTML. Your names are max_price and min_price.
2. Quadrature is also not defines. You have min_quadrature and max_quadrature.

These errors cause the script not to continue. Below is the script tested to provide you with the solution your looking for.

<script>
   var onSubmitFunc = function(e){
      e.preventDefault();
      e.stopPropagation();
      if( e.stopImmediatePropagation ){
          e.stopImmediatePropagation();
      }
      var city = this['city'].value;
      var min_price = this["min_price"].value;
      var max_price = this["max_price"].value;
      var price = min_price + "_" + max_price;
      var min_quad = this["min_quadrature"].value;
      var max_quad = this["max_quadrature"].value;
      var quadrature = min_quad + "_" + max_quad;
      var propertyType = this["propertyType"].value;

      url =  '/city/' +  encodeURIComponent(city) + '/price/' + encodeURIComponent(price) + '/quadrature/' + encodeURIComponent(quadrature) + '/propertyType/' + encodeURIComponent(propertyType);
      window.location.href = this.action + url;

    }


document.addEventListener( 'DOMContentLoaded', function(){
  var srch = document.getElementById("searchForm");
  srch.addEventListener('submit', onSubmitFunc, false);
}, false ); 
  </script>

Updated function To remove blank entries. Replace the function above.

var onSubmitFunc = function(e){
  e.preventDefault();
  e.stopPropagation();
  if( e.stopImmediatePropagation ){
      e.stopImmediatePropagation();
  }
  var city = this['city'].value.trim();
  var min_price = this["min_price"].value.trim();
  var max_price = this["max_price"].value.trim();
  var price = min_price + "_" + max_price;
  var min_quad = this["min_quadrature"].value.trim();
  var max_quad = this["max_quadrature"].value.trim();
  var quadrature = min_quad + "_" + max_quad;
  var propertyType = this["propertyType"].value.trim();

  url = city.length === 0 ? '' : ( '/city/' +  encodeURIComponent(city) );
  url += price.length === 1 ? '' : ( '/price/' + encodeURIComponent(price) );
  url += quadrature.length === 1 ? '' : ( '/quadrature/' + encodeURIComponent(quadrature) ) ;
  url += propertyType.length === 0 ? '' : ( '/propertyType/' + encodeURIComponent(propertyType) );
  window.location.href = this.action + url;


}