Filled many Textbox with Select box using laravel-CodePudding

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 Illuminate\Http\Request;
use App\Models\P_Peminjaman;
use App\Models\M_Asset;
use App\Models\M_Perpustakaan;
use App\Models\User;

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 App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

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);
               }
              
            })
        })
    });

my web.php

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  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"  placeholder="Info pengarang_buku" id="pengarang_buku" value="{{ old('pengarang_buku') }}">

<input type="text" name="penerbit_buku"  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

CodePudding user response：

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); 
}

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']
           }
          
        })
    })
});