Fetch data from database using jquery via selectbox in Laravel Project

Question

I am trying to load information such as 'name' from a table where the admission number matches the one selected from the select box using jquery. With the code below, it only select the first 'name' from the table in the database and it doesn't select with respect to the admission number on the select box. (Note: I am not very familiar with jquery)

Code for the Route.

 Route::post('get-student-info/', [ResultController::class, 'get_student_info']);

Controller code

public function get_student_info(Request $request)
{
    $adnum=$request->post('admission_num');
    $stud=User::where('admission_num',$adnum)->get();

    foreach ($stud as $list)

    {


            $html='<p><b>First Name :'.$list->name.'</b></p>';

    }

    echo $html;


}

Blade.php code

<div class="col-md-3 ms-3">
   <select class="form-select form-select-sm" name="admission_num" id="admission_num" aria-label="Default select example">
                       <option></option>
                           @foreach($admission as $admissions)
                       <option value="{{ $admissions->admission_num }}">{{ $admissions->admission_num }}</option>
                           @endforeach
                           </select>
                                               
       </div>

Output shows here

<div id="info" class="receipt-right">
                                                            <p><b>First Name :</b></p>
                                                            <p><b>Last Name :</b></p>
                                                           
                                                        </div>

JQuery Code

<script>
                        jQuery(document).ready(function(){
                        jQuery('#admission_num').change(function(){
                            let adnum=jQuery(this).val();
                            jQuery('#info').html('<p><b>First Name :</b></p>')
                            jQuery.ajax({
                                url:'/get-student-info',
                                type:'post',
                                data:'adnum='+adnum+'&_token={{csrf_token()}}',
                                success:function(result){
                                    jQuery('#info').html(result)
                                }
                            });
                        });

                    });
                    </script>

roshankandy · Accepted Answer · 2022-06-27 18:01:28Z

1

Seems like no issue in jquery part. I see the issue is in the Controller.

After you are getting relevant results using admission number and loop it for a output. but in the loop it always give us to the last record (according to your code)

try this way.

public function get_student_info(Request $request)
    {
        $adnum=$request->post('admission_num');
        $stud=User::where('admission_num',$adnum)->get();
    
        $html=''; //before looping the result initialize the output variable

        foreach ($stud as $list)
        {
    
               $html+='<p><b>First Name :'.$list->name.'</b></p>'; // use = to += this will bind the result
               $html+='<p><b>First Name :'.$list->last_name.'</b></p>'; // if you want last name, assume user table column has 'last_name'
        }
    
        echo $html;
}

answered Jun 27, 2022 at 18:01

roshankandy

214 bronze badges

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

1 Comment

Samuel Over a year ago

Thank you for taking time to respond. I just try the code you suggested now and when I used += it did not display any result but when I used = It functioned as before. It only fetches the first data from the data table and irrespective of the admission number I selected it keeps displaying the first name on the data table.

Huy Dev · Accepted Answer · 2022-06-28 09:55:00Z

0

you can return view in your method and Ajax query you must set dataType = "html"
EX:

$.ajax({
        url: `/products/getAjax`,
        'method': 'GET',
        'dataType': 'html',
    }).done(function (data) {
        setLoading(false);
        $('#product-wrapper').html(data);
    }).fail(function (data) {
        console.log("🚀 ~ file: list.js ~ line 10 ~ data", data)
    });

Method

public function getAllAjax(Request $request)
    {
        $products = $this->productReponsitory->getAllPProduct($page);
        return view('users.pages.products.list.parts.product-show', compact('products'));

    }

answered Jun 28, 2022 at 9:55

Huy Dev

341 silver badge3 bronze badges

Collectives™ on Stack Overflow

Fetch data from database using jquery via selectbox in Laravel Project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related