How to pass a variable from view to controller using javascript on change in laravel

Question

I want to passing a variable (id) from view to controller using javascript onChange. I have done it but the result when I'm do dd always the same. In my case i always get "7".

Here is my code:

View:

 <select id="jurusan_id" type="text" name="jurusan_id" onchange="filterJurusan()">
       <option value disable>Jurusan</option>
         @foreach (App\Models\Admin\Jurusan::all() as $jurusan)
          <option value="{{ $jurusan->id }}">{{ $jurusan->nama_jurusan }}</option>
         @endforeach
    </select>

Route:

 Route::get('datasiswa/{id}', 'Admin\SiswaController@filterSiswa')->name('filterSiswa');

Js:

function filterJurusan() {
  window.location.href = "{{ route('filterSiswa', $jurusan->id) }}";
}

Controller:

public function filterSiswa(Request $request, $id)
  {
      dd($id);
  }

I know something was wrong with my code, but i can't figure out what it is.

Aless55 · Accepted Answer · 2021-04-29 16:05:15Z

1

I think you are confusing server-side and client-side code. The JS code piece renders the route once upon loading. The $jurusan variable is set to the last object of your foreach loop. Therefore the id will always be 7.

You will have to get the selected item. For that adjust the onchange function:

onchange="filterJurusan(this)"

Afterwards you can get the value, which is the id like this.

function filterJurusan(el) {
 var value = (el.value || el.options[el.selectedIndex].value); 
  window.location.href = '/datasiswa/'+value;
}

Now the question is if you simply want to change the location (like in the code) or as your function names indicate, want to filter data?

answered Apr 29, 2021 at 16:05

Aless55

2,7092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Catto Over a year ago

I want to filter data using select. So i need an id as a parameter. Btw this code working

Aless55 Over a year ago

if you want to stay on the same page you will have to make some ajax requests :)

Catto Over a year ago

Thanks for information, then I'll do some research about using ajax for filtering data

Aless55 Over a year ago

@Catto I don't know much you want to learn (or read about) but a good choice would be to use Vue.js (this will make displaying dynamic data very easy)

Abdullah Shakir · Accepted Answer · 2021-04-29 16:18:32Z

1

Actually, you are populating Jurusan records on view by App\Models\Admin\Jurusan::all() as $jurusan. What this does is populate options in your select but at the end of iterations last record's data left stored in $jurusan variable that you are using in function filterJurusan() to call controller method. You should get jurusanId = document.getElementById('jurusan_id') and pass it to the controller like window.location.href = '/datasiswa/' + jurusanId;

answered Apr 29, 2021 at 16:18

Abdullah Shakir

2232 silver badges8 bronze badges

1 Comment

Abdullah Shakir Over a year ago

You should return all records from the controller method using for this view. That's how you will achieve actual MVC.

Subash Rijal · Accepted Answer · 2021-04-29 16:13:32Z

0

This can be more easier and accurate to get your result..

<form action="{{route('filterSiswa')}}" method="GET">
 <select onchange="this.form.submit()" name="jurusan_id">
   <option value disable>Jurusan</option>
     @foreach (App\Models\Admin\Jurusan::all() as $jurusan)
      <option value="{{ $jurusan->id }}">{{ $jurusan->nama_jurusan }}</option>
     @endforeach
 </select>
 </form>

answered Apr 29, 2021 at 16:13

Subash Rijal

1613 silver badges10 bronze badges

2 Comments

Catto Over a year ago

Thanks, but using this method i can't get id from foreach

Subash Rijal Over a year ago

Oh yes, I forget to mention that, you have to update your route, Route::get('datasiswa', 'Admin\SiswaController@filterSiswa')->name('filterSiswa'); And catch id in controller as follow: request()->id

Collectives™ on Stack Overflow

How to pass a variable from view to controller using javascript on change in laravel

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related