How to edit data in a model in the laravel model using Ajax?

In this tutorial, I will give you an example of How to edit data in a model in the laravel model using Ajax, So you can easily apply it with your laravel 5, laravel 6, laravel 7, laravel 8, and laravel 9 application.

First, what we’re doing here, This is the example :


Let’s create Laravel edit form modal | Display data in modal popup Laravel example

routes\web.php :

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/book-list', [BookController::class, 'bookList'])->name('book.list');
Route::get('book-edit/{id}',[BookController::class,'bookEdit']);
Route::post('book-update',[BookController::class,'bookUpdate'])->name('book.update');

app\Http\Controllers\BookController.php :

<?php

namespace App\Http\Controllers;
use Session;
use App\Models\Book;
use Illuminate\Http\Request;

class BookController extends Controller
{

    public function bookList(){
        $books = Book::get();
        return view('example.list',compact('books'));
    }

    public function bookEdit ($id){
         $bookData = Book::find($id);
         return response()->json([
            'status' =>200,
            'bookdata' =>$bookData,
        ]);
    }

    public function bookUpdate(Request $request){
        $bookData = Book::find($request->book_id);
        dd($bookData);
    }
}

resources\views\example\list.blade.php

   <head>
      <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>
   <!-- Edit Book Modal -->
   <div class="modal fade" id="EditBookModalLabel" tabindex="-1" role="dialog" aria-labelledby="EditBookModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
         <form data-parsley-validate class="form-horizontal form-label-left" action="{{ route('book.update') }}" method="POST">
            @csrf
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body" style="width:620px;">
                  <div class="item form-group">
                     <label class="col-form-label col-md-3 col-sm-3 label-align">Book Name
                     <span class="required" style="color:red">*</span>
                     </label>
                      <input type="hidden" name="book_id" id="bookId" value="">
                     <div class="col-md-6 col-sm-6">
                        <input type="text" name="book_name"  id="bookName" value="" required="required" class="form-control">
                     </div>
                  </div>
                  <div class="item form-group">
                     <label class="col-form-label col-md-3 col-sm-3 label-align">Book Status
                     <span class="required" style="color:red">*</span>
                     </label>
                     <div class="col-md-6 col-sm-6 ">
                        <select class="form-control" name="book_status"  id="bookStatus" required="required">
                           <option>Select Status</option>
                           <option value="in_stock">In Stock</option>
                           <option value="out_of_stock">Out of Stock</option>
                           <option value="other">Other</option>
                        </select>
                     </div>
                  </div>
                  <div class="item form-group">
                     <label class="col-form-label col-md-3 col-sm-3 label-align">Book Author
                     </label>
                     <div class="col-md-6 col-sm-6">
                        <input type="text" name="book_author"  id="bookAuthor" value="" class="form-control">
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="col-md-6 col-sm-6 offset-md-5">
                     <button class="btn btn-danger" type="reset">Reset</button>
                     <button type="submit" class="btn btn-success">Update</button>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
   <br><br>
   <body>
      <div class="container">
         <h3>Laravel edit form modal | Display data in modal popup Laravel example</h3>
         <br><br>
         <table class="table table-bordered">
            <tr>
               <th>ID</th>
               <th>Name</th>
               <th>Author</th>
               <th>Status</th>
               <th>Action</th>
            </tr>
            @if(isset($books) && !empty($books))
            @foreach ($books as $key => $book )
            <tr>
               <td>{{ $key+1 }}</td>
               <td>{{ $book->book_name }}</td>
               <td>{{ $book->book_author }}</td>
               <td>{{ $book->book_status }}</td>
               <td>
                  <button type="button" data-toggle="modal" data-target="#EditBookModalLabel" value="{{ $book->id }}" class="btn btn-warning btn-xs editbtn" style="margin-right:5px;">
                  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                  </button>
               </td>
            </tr>
            @endforeach
            @endif
         </table>
      </div>
   </body>
<script>
    $(document).ready(function(){
         $(document).on('click','.editbtn',function(){
            var book_id = $(this).val();
            $.ajax({
               type:"GET",
               url:"/book-edit/"+book_id,
               success:function(response){
                  $('#bookId').val(response.bookdata.book_id);
                  $('#bookName').val(response.bookdata.book_name);
                  $('#bookAuthor').val(response.bookdata.book_author);
                  $('#bookStatus').val(response.bookdata.book_status);
                  $('#bookId').val(book_id);
               }
            });
         });
      });
</script>

Read also:- Laravel Ajax autocomplete search.

Run application :

http://127.0.0.1:8000/book-list


In this article, we learned “How to edit data in a model in the laravel model using Ajax”, I hope this article will help you with your Laravel application Project.

Read also:- Laravel Excel export with the header row.

Hi, My name is Gaurav Pandey. I'm a Laravel developer, owner of 8Bityard. I live in Uttarakhand - India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Javascript, JQuery, Laravel, WordPress. connect@8bityard.com

Scroll to Top