laravel 6 Update Data in AJAX CRUD Operations

jQuery Laravel php Programming Technology

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Ajax Image Upload without Refreshing Page using Jquery
  2.   Laravel 6 Inserting & Updating Eloquent Models
  3.   laravel group by Eloquent Aggregate Query
  4.   Event Watch route change with VueJS
  5.   Eloquent Batch update multiple records using Laravel
  6.   Query Scope using Laravel 6 Eloquent Example
  7.   C#.Net OOPS Concepts, Features & Explanation
  8.   Navigation Active Class using Laravel Example
  9.   How to Open URL in New Tab using Angular
  10.   Laravel 6 Insert Update and Delete record from MySQL

Leave a Reply

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