laravel 6 Update Data in AJAX CRUD Operations

Today, We want to share with you laravel 6 Update Data in AJAX CRUD.In this post we will show you Update data from database using Laravel and Ajax, hear for Update data from database using Laravel framework we will give you demo and example for implement.In this post, we will learn about CRUD (Create Read Update Delete) in a Laravel 6 App with an example.

laravel 6 Update Data in AJAX CRUD

There are the Following The simple About Insert Update and Delete record from MySQL in Laravel 6 Full Information With Example and source code.

As I will cover this Post with live Working example to develop update data in laravel using model, so the update record in laravel using eloquent is used for this example is following below.

Step 1: Define a Laravel Route

web.php (route)

Route::resource('/memberInformation','MemberInfoController');

Step 2: Make a controller in Laravel

memberInformationConstroller.php (controller)

public function edit($id)
    {
        $memberInformation = MemberInfo::find($id);
        return view('memberInformation.edit',compact('memberInformation','id'));
    }

public function update($id)
    {
        $memberInformation = MemberInfo::find($id);
        $memberInformation->type = request('type');
        $memberInformation->name = request('name');
        $memberInformation->email = request('email');
        $memberInformation->mobile = request('mobile');
        $memberInformation->address = request('address');
        
        $memberInformation->save();
       
        return json_encode(array('statusCode'=>200));
      
    }

Step 3: Create a laravel Model

memberInformation.php (Model)

class MemberInfo extends Model
{
    protected $table = 'members_details';
    protected $fillable = [
        'type','name', 'email','mobile','address'
    ];
}
     

Step 4: Blade Edit View File

edit.blade.php

@extends('memberInformation.layout')
   
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Edit Member</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('memberInformation.index') }}"> Back</a>
            </div>
        </div>
    </div>
   
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
  
    {{-- <form action="{{ route('memberInformation.update',$memberInformation->id) }}" method="POST"> --}}
        {{-- {{ csrf_field() }}
        {{ method_field('PATCH') }} --}}
   
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group cart-jdk">
                    <strong>Member First Name:</strong>
                    <input type="text" id="name" name="name" value="{{ $memberInformation->name }}" class="form-control custom-dsp" placeholder="Member First Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group cart-jdk">
                    <strong>Email ID:</strong>
                    <input type="text" class="form-control custom-dsp" id="email" name="email" value ="{{ $memberInformation->email }}" placeholder="Email ID">
                </div>
            </div>
            <!-- mobile -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group cart-jdk">
                    <strong>Mobile:</strong>
                    <input type="text" class="form-control custom-dsp" id ="mobile" name="mobile" value ="{{ $memberInformation->mobile }}" placeholder="Mobile Number">
                </div>
            </div>
            <!-- address-->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group cart-jdk">
                    <strong>Address:</strong>
                    <input type="text" class="form-control custom-dsp" id = "address" name="address" value ="{{ $memberInformation->address }}" placeholder="address">
                </div>
            </div>

            <!-- -->
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button class="btn btn-primary" id="update_data" value="{{ $memberInformation->id }}">Submit</button>
            </div>
        </div>
   
    {{-- </form> --}}
    <script>
        $(document).ready(function(){

    $(document).on("click", "#update_data", function() { 
        var url = "{{URL('memberInformation/'.$memberInformation->id)}}";
        var id= 
		$.ajax({
			url: url,
			type: "PATCH",
			cache: false,
			data:{
                _token:'{{ csrf_token() }}',
				type: 3,
				name: $('#name').val(),
				email: $('#email').val(),
				mobile: $('#mobile').val(),
				address: $('#address').val()
			},
			success: function(responseOutput){
                responseOutput = JSON.parse(responseOutput);
             if(responseOutput.statusCode)
             {
                window.location = "/memberInformation";
             }
             else{
                 alert("Internal Server Error");
             }
				
			}
		});
	}); 
});

    </script>
@endsection

Step 5: Layout File

layout.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>PHP Laravel 6 CRUD using jQuery Ajax</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
    @yield('content')
</div>
   
</body>
</html>
    

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about laravel 6 Update data using jQuery Ajax.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.