Home » Laravel Ajax Bootstrap Toggle switch Update MySQL

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.

Read Also:  Laravel 6 Eloquent Has With and WhereHas

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.

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:  Custom Fancy Custom Scrollbar styling using CSS and Jquery

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel Bootstrap Toggle switch Update DB field using Ajax
  2. Read Also:  C# Hash table and Dictionary Tutorial with Examples
  3. Read Also:  Bootstrap Toggle switch with ajax update to mysql in PHP
  4. Read Also:  Bootstrap Toggle Inside JQuery DataTable
  5. Read Also:  VueJS Trim String - VueJS Trim LTrim and RTrim Functions
  6. Read Also:  VueJS Filter Currency Rounding 2 decimal places Example
  7. Read Also:  Bootstrap Toggle switch with ajax update to mysql in Laravel
  8. Read Also:  Laravel 6 Bootstrap Toggle Switch With Ajax Update To Mysql
  9. Read Also:  convert date format in php
  10. Read Also:  Laravel Toggle Switch with Ajax Update Database

Leave a Comment

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