CODEWITHSUNDEEP
javascriptphphtmljquerylaravel
wan programmer
wan programmer

Reputation: 71

How to display other value in database in Laravel 8

I have a dropdown from database when I choose an option, I want to display the other data related to the option I choose. How can I achieve that ? Is javascript / jquery can do that ? if so, how ?

Interface

Below are my code:

HTML:

<div class="container-fluid">
  <div class="row">
    <h1>Dropdown value from database</h1>
    <br><br><br>
  </div>

  <form action="dropdownfromdb" method="post">
    @csrf
    <div class="row">
      <div class="col">
        <select name="pet">
          <option>Choose Name</option>
          @foreach($memberlist as $member)
            <option value="{{$member->id}}">{{$member->name}}</option>
          @endforeach
        </select><br><br>
      </div>
      <div class="col-10">
        <label>His age is: </label><input type="number" name="age" value="">
      </div>
    </div>
  </form>
</div>

Controller:

public function index()
    {
        $memberlist = Member::select('id','name')->get();
        return view('basic.dropdownfromdb',compact('memberlist'));
    }

Upvotes: 0

Views: 973

Answers (2)

Optimus Prime
Optimus Prime

Reputation: 308

Get the value 'age' from database and change the controller is as below,

public function index()
    {
        $memberlist = Member::select('id','name', 'age')->get();
        return view('basic.dropdownfromdb',compact('memberlist'));
    }

Within the event change use the following to get the current selected option:

var nowAge = $(this).children(':selected').data('age');

The following code snippet just prints the selected value and set the nowAge to the next input field using $(this).next('input').focus().val(nowAge);.

Add following jQuery logic with that value.

$(".pet-select").change(function () {
    var nowAge = $(this).children(':selected').data('age');
    console.log(nowAge);
    
    $("#age-value").val(nowAge);  
});

So your final HTML code segment should be below,

<div class="container-fluid">
  <div class="row">
    <h1>Dropdown value from database</h1>
    <br><br><br>
  </div>

  <form action="dropdownfromdb" method="post">
    @csrf
    <div class="row">
      <div class="col">
        <select class="pet-select" name="pet">
          <option>Choose Name</option>
          @foreach($memberlist as $member)
            <option value="{{$member->id}}" data-age="{{$member->age}}">{{$member->name}}</option>
          @endforeach
        </select><br><br>
      </div>
      <div class="col-10">
        <label>His age is: </label><input type="number" id="age-value" name="age" value="">
      </div>
    </div>
  </form>
</div>

Hope it will be solve your issue.

I have create a complete HTML source code for this issue,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dropdown value from database</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container-fluid">
    <div class="row">
        <h1>Dropdown value from database</h1>
        <br><br><br>
    </div>
    
    <form action="dropdownfromdb" method="post">
        <div class="row">
        <div class="col-sm-4">
            <select class="pet-select" name="pet">
            <option>Choose Name</option>
            <option value="ahmad" data-age="21">Ahmad</option>
            <option value="abu" data-age="27">Abu</option>
            <option value="ali" data-age="21">Ali</option>                        
            </select><br><br>
        </div>
        <div class="col-sm-8">
            <label>His age is: </label><input type="number" id="age-value" name="age" value="">
        </div>
        </div>
    </form>
</div>

<script>
$(document).ready(function(){
    $(".pet-select").change(function () {
    var nowAge = $(this).children(':selected').data('age');
    console.log(nowAge);
    
    $("#age-value").val(nowAge);    
});
})
</script>

</body>
</html>

Upvotes: 2

Zia Yamin
Zia Yamin

Reputation: 1004

try like this one:

HTML:-

<div class="container-fluid">
     <div class="row">
          <h1>Dropdown value from database</h1>
          <br><br><br>
     </div>
     <div class="row">
          <div class="col">
                <select name="pet" id="pet">
                      <option>Choose Name</option>
                      @foreach($memberlist as $member)
                           <option value="{{$member->id}}">{{$member->name}}</option>
                      @endforeach
                </select><br><br>
         </div>
     <div class="col-10">
    <label>His age is: </label><input type="number" name="age" value="" id="age">
  </div>
</div>

your script:-

<script>
     $(document).ready(function () {
        // get id when pet change
        $("#pet").change(function () {
            var id= $(this).val();
           
            $.ajax({
                method:"get",
                url: url: "{{ route('ajax.request') }}",
                 data: {_token:_token, id:id}, 
                success:function (data) {

                     $('#pet').val(data);
                },
                error:function () {

                }
            })

        });
    });

</script>

your route:-

Route::get('ajax/request', [UserController::getAge, 'ajaxRequest'])->name('ajax.request');

your controller method:-

public function getUserAge(Request $request){
    $id = $request->get('id');
    $age = DB::table('your table name')->select('user age column name')->where('user age column name',$id)->first();
    return response->($age->column name);
}

Upvotes: 0

Related Questions