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

Answer

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>

Leave a Reply

Your email address will not be published. Required fields are marked *