Laravel Ajax Bootstrap Toggle switch Update MySQL

Today, We want to share with you Laravel Ajax Bootstrap Toggle switch Update MySQL Data.In this post we will show you store value from on/off button in mysql database using Laravel ajax, hear for Update Mysql Records Onclick Bootrstrap Checkbox Toggle we will give you demo and example for implement.In this post, we will learn about Bootstrap Toggle switch with ajax update to mysql in Laravel with an example.

Laravel Ajax Bootstrap Toggle switch Update MySQL Data

There are the Following The simple About Laravel Ajax Bootstrap Toggle switch Update MySQL Data Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 5.8 Toggle switch Update DB field using Ajax, so how to get toggle button value in Laravel for this example is following below.

Read Also:  convert date to timestamp javascript - 5 Ways to convert date to timestamp

Step 1: Install Laravel 5.8

install fresh laravel 5.8 We application.

composer create-project --prefer-dist laravel/laravel toggleLaravel

Step 2: Create Routes

routes/web.php

Route::get('products', '[email protected]');
Route::get('product_modreator', '[email protected]_modreator');

Step 3: Create laravel 5.8 Controller

app/Http/Controllers/ProductController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Product;
  
class ProductController extends Controller
{
    public function index()
    {
        $products = Product::get();
        return view('products',compact('products'));
    }
  
    /**
     * Responds with a welcome message with instructions
     *
     * @return \Illuminate\Http\Response
     */
    public function product_modreator(Request $request)
    {
        $product = Product::find($request->product_id);
        $product->status = $request->status;
        $product->save();
  
        return response()->json(['success'=>'Status change successfully.']);
    }
}

Step 4: Create View

resources/views/products.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Update Product Status Using Toggle Button Example - pakainfo.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"  />
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Laravel Update Product Status Using Toggle Button Example - pakainfo.com</h1>
        <table class="table table-bordered">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>Description</th>
                  <th>Status</th>
               </tr> 
            </thead>
            <tbody>
               @foreach($products as $product)
                  <tr>
                     <td>{{ $product->name }}</td>
                     <td>{{ $product->description }}</td>
                     <td>
                        <input data-id="{{$product->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $product->status ? 'checked' : '' }}>
                     </td>
                  </tr>
               @endforeach
            </tbody>
        </table>
    </div>
</body>
<script>
  $(function() {
    $('.toggle-class').change(function() {
        var status = $(this).prop('checked') == true ? 1 : 0; 
        var product_id = $(this).data('id'); 
         
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/product_modreator',
            data: {'status': status, 'product_id': product_id},
            success: function(data){
              console.log(data.success)
            }
        });
    })
  })
</script>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Laravel Toggle Switch with Ajax Update Database

Summary

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

I hope you get an idea about Laravel Ajax Bootstrap Toggle switch Update MySQL Data.
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.