Filled many Textbox with Select box using laravel

I want to display data in a text box based on the selected options. for example if If I select the title of the book, it will display the author of the book, the price of the book, the year the book was printed. I want to display the book based on the selected option chosen

my Controller

use IlluminateHttpRequest;
use AppModelsP_Peminjaman;
use AppModelsM_Asset;
use AppModelsM_Perpustakaan;
use AppModelsUser;

class P_PeminjamanController extends Controller
{
public function getpengarang_buku(Request $request)
    {
        $kode_buku = $request->kode_buku;
        $perpustakaan = Regency::where('buku_kode', $kode_buku)->get();

        foreach($perpustakaan as $buku){
            echo "<input id='$buku->pengarang_buku' type='text' class='$buku->pengarang_buku'>";
            echo "<input id='$buku->penerbit_buku' type='text' class='$buku->penerbit_buku'>";
        }
    }
}

JavaScript
​x
 
use IlluminateHttpRequest;use AppModelsP_Peminjaman;use AppModelsM_Asset;use AppModelsM_Perpustakaan;use AppModelsUser;​class P_PeminjamanController extends Controller{public function getpengarang_buku(Request $request)    {        $kode_buku = $request->kode_buku;        $perpustakaan = Regency::where('buku_kode', $kode_buku)->get();​        foreach($perpustakaan as $buku){            echo "<input id='$buku->pengarang_buku' type='text' class='$buku->pengarang_buku'>";            echo "<input id='$buku->penerbit_buku' type='text' class='$buku->penerbit_buku'>";        }    }}​

my Model

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

class M_Perpustakaan extends Model
{
    use HasFactory;
    protected $table = "m_perpustakaan";
}

JavaScript
 
<?php​namespace AppModels;​use IlluminateDatabaseEloquentFactoriesHasFactory;use IlluminateDatabaseEloquentModel;​class M_Perpustakaan extends Model{    use HasFactory;    protected $table = "m_perpustakaan";}​

my javascript

$(function()
    {
        $('#judul_buku').on('change', function(){
            let kode_buku = $('#judul_buku').val();

            // console.log(kode_buku);
            $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
              type : 'POST',
              url : "{{ route('getpengarang_buku') }}",
              data : {kode_buku:kode_buku},
              cache : false,

             success: function(msg){
                $('#pengarang_buku').html(msg);
                $('#penerbit_buku').html(msg);
               }
              
            })
        })
    });

JavaScript
 
$(function()    {        $('#judul_buku').on('change', function(){            let kode_buku = $('#judul_buku').val();​            // console.log(kode_buku);            $.ajax({              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },              type : 'POST',              url : "{{ route('getpengarang_buku') }}",              data : {kode_buku:kode_buku},              cache : false,​             success: function(msg){                $('#pengarang_buku').html(msg);                $('#penerbit_buku').html(msg);               }                          })        })    });​

my web.php

Route::post('/getpengarang_buku',[P_PeminjamanController::class, 'getpengarang_buku'])->name('getpengarang_buku');

JavaScript
 
Route::post('/getpengarang_buku',[P_PeminjamanController::class, 'getpengarang_buku'])->name('getpengarang_buku');​

my create.blade.php

<head><meta name="csrf-token" content="{{ csrf_token() }}" /></head>
<body>
<select class="form-control" name="judul_buku" id="judul_buku">
                        <option value="">- Pilih Buku -</option>
                        @foreach ($buku as $item)
                        <option value="{{ $item->kode_buku }}">{{ $item->judul_buku }}</option>
                        @endforeach
                      </select>

<input type="text" name="pengarang_buku" class="form-control" placeholder="Info pengarang_buku" id="pengarang_buku" value="{{ old('pengarang_buku') }}">

<input type="text" name="penerbit_buku" class="form-control" placeholder="Info penerbit_buku" id="penerbit_buku" value="{{ old('penerbit_buku') }}">

</body>

JavaScript
 
<head><meta name="csrf-token" content="{{ csrf_token() }}" /></head><body><select class="form-control" name="judul_buku" id="judul_buku">                        <option value="">- Pilih Buku -</option>                        @foreach ($buku as $item)                        <option value="{{ $item->kode_buku }}">{{ $item->judul_buku }}</option>                        @endforeach                      </select>​<input type="text" name="pengarang_buku" class="form-control" placeholder="Info pengarang_buku" id="pengarang_buku" value="{{ old('pengarang_buku') }}">​<input type="text" name="penerbit_buku" class="form-control" placeholder="Info penerbit_buku" id="penerbit_buku" value="{{ old('penerbit_buku') }}">​</body>​

but the result can’t be found in the textbox at all, can anyone help me? thx

Answer

you forget to add return at your controller, its better to return the value from your request with json like this rather than echo value

public function getpengarang_buku(Request $request)
{
    $kode_buku = $request->kode_buku;
    $perpustakaan = Regency::where('buku_kode', $kode_buku)->get();
    $data = [];
    foreach($perpustakaan as $buku){
        $data = ['pengarang_buku' => $buku->pengarang_buku,
                'penerbit_buku' => $buku->penerbit_buku];
    }
    return response()->json($data); 
}

JavaScript
 
public function getpengarang_buku(Request $request){    $kode_buku = $request->kode_buku;    $perpustakaan = Regency::where('buku_kode', $kode_buku)->get();    $data = [];    foreach($perpustakaan as $buku){        $data = ['pengarang_buku' => $buku->pengarang_buku,                'penerbit_buku' => $buku->penerbit_buku];    }    return response()->json($data); }​

and in ajax response just pass the value to input text

 $(function()
{
    $('#judul_buku').on('change', function(){
        let kode_buku = $('#judul_buku').val();

        // console.log(kode_buku);
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type : 'POST',
          url : "{{ route('getpengarang_buku') }}",
          data : {kode_buku:kode_buku},
          cache : false,

         success: function(msg){
            $('#pengarang_buku').val(msg['pengarang_buku']);
            $('#penerbit_buku').val(msg['penerbit_buku']
           }
          
        })
    })
});

JavaScript
 
 $(function(){    $('#judul_buku').on('change', function(){        let kode_buku = $('#judul_buku').val();​        // console.log(kode_buku);        $.ajax({          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },          type : 'POST',          url : "{{ route('getpengarang_buku') }}",          data : {kode_buku:kode_buku},          cache : false,​         success: function(msg){            $('#pengarang_buku').val(msg['pengarang_buku']);            $('#penerbit_buku').val(msg['penerbit_buku']           }                  })    })});​

Advertisement

Answer