Home / Questions / 429664
Accepted
René Merlo
Asked: 2022-02-20 14:48:37 +0800 CST 2022-02-20 14:48:37 +0800 CST

Pass the value of Input to a Controller through a Link

  • 772

I am making a page that allows you to search for records by filtering through a field, in the image I show you in greater detail:

enter image description here

I have already defined the Controller that will return the data applying the filter, which is not how to pass the value that the user writes in the field through the Search button. The Search button in a link, but it could also be a button, but I think that there I would have to use a Form

This is the Controller I would like to use:

    public function indexF($cadFiltros){
    $clientes = Cliente::orderBy('id', 'desc' )
        ->where('razSocial', 'LIKE', '%' . $cadFiltros . '%')
        ->paginate(15);

    return view('clientes.listaClientes',
        [
            'clientes'=>$clientes
        ]
    );
}

and this other piece of code, shows the field and the button to perform the searches:

<div class="flex w-full bg-gray-500 rounded mt-10 mb-5 p-2">
        <label class="form-label" for="cadBusquedas">Nombre del Cliente</label>
        <input class="form-camptextos" type="text" name="cadBusquedas" value="" placeholder="Cliente a buscar...">
        <a type="button" class="font-osw text-sm bg-blue-500 hover:bg-blue-700 text-white text-center w-28 ml-3 p-2 pt-3.5 rounded focus:outline-none focus:shadow-outline" href="{{route('clientes.indexF', 'JUAN')}}">Buscar</a>
    </div>

I am parameterizing by "JUAN" code, but it is only for testing purposes. Precisely, that is where I am stuck, how do I send what the user writes in the field

Thanks and regards for your help.

laravel

1 Answers

  1. Best Answer

    Personally, I don't really recommend doing that, you make many requests to the server by changing the input each time, more specifically, when you add or remove a character from the string you want to filter. Now, since I tell you this, I recommend you dedicate a view exclusively for this (my personal taste).

    1.- If you don't want that you update a part when performing the search WITHOUT refreshing the entire page: The option that I show you below is used to be executed with each change in the input, but if you want this not to be the case, add a button in your browser than in the "onclick" event the "Search()" function, in this way you will avoid a lot of requests to your server.

    <div class="flex w-full bg-gray-500 rounded mt-10 mb-5 p-2">
  <label class="form-label" for="cadBusquedas">Nombre del Cliente</label>
  {{-- Utilizo el siguiente input con id buscador-clientes por temas de código limpio --}}
  <input class="form-camptextos" type="text" name="cadBusquedas" value="" placeholder="Cliente a buscar..." id="buscador-clientes"> 
  {{-- <input class="form-camptextos" type="text" name="cadBusquedas" value="" placeholder="Cliente a buscar..." onchange="buscar()">  --}}
  <a type="button" class="font-osw text-sm bg-blue-500 hover:bg-blue-700 text-white text-center w-28 ml-3 p-2 pt-3.5 rounded focus:outline-none focus:shadow-outline" href="{{route('clientes.indexF', 'JUAN')}}">Buscar</a>
</div>


<table>
  <thead>
    <tr>
      dato1
    </tr>
    <tr>
      dato2
    </tr>
  </thead>
  <tbody id="registros-busqueda">
    
    <tr>
      response.dato2
    </tr>
  </tbody>
</table>

<script>

  document.getElementById('buscador-clientes').onchange = buscar;
  function buscar(){
    const cliente = document.getElementById('buscador-clientes').value;
    $.ajax({
    type: "GET",
    url: "../url", // Tu  URL o {{route('nombre de la ruta que asignaste en web.php')}}
    data:{
      cliente: cliente
    } , 
    dataType: "JSON",// Este campo no es necesario, puedes eliminarlo
    success: function (response) {
      // Aqui recibes tus datos en formato JSON normalmente
      let tabla = document.getElementById('registros-busqueda');
      tabla.innerHTML = `<tr>${response.dato1}</tr>`
      tabla.innerHTML += `<tr>${response.dato2}</tr>`
      tabla.innerHTML += `<tr>${response.dato3}</tr>`
    }
  });
  }
</script>

    2.- Easier, make an advanced search engine where you have your input in a Form, you make the request to your controller when you click on submit (the submit of your form), in this way you avoid the user making requests to your server in an uncontrolled way. But of course, the page will update with each form submission.

    • 0