Laravel Bootstrap Toggle switch Update DB field using Ajax

Today, We want to share with you Laravel Bootstrap Toggle switch Update DB field using Ajax.In this post we will show you Bootstrap Toggle switch Update Database field using Ajax, hear for Create Stylish Toggles Checkboxes & Use in Form with Laravel Ajax 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 5.7 with an exampleLaravel 5.7 Toggle switch Update DB field using Ajax.

Laravel Bootstrap Toggle switch Update DB field using Ajax

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

As I will cover this Post with live Working example to develop Bootstrap Toggle to Update Database in Laravel 5.7, so the some major files and Directory structures for this example is following below Laravel Toggle Switch Inside Bootstrap Ajax Example.

Step 1: Include CDN and HTML Code

laravel-toggle-switch-button

Manage data using switch/toggle button on html with Laravel

  @if ($saved == true)
    Saved!
  @else
    Save
  @endif

Step 2: JavaScript Function

function save() {
    var saveEl = document.getElementById("save-icon");
    var iconType = saveEl.getAttribute("data-prefix");
}

Step 3: Ajax Http Call in jQuery

if ( iconType === 'fas' ) {
  $.ajax({
    url: "/unsave-product",
    cache: false,
    data: {
        slug: productSlug,
        userId: {{ $userId }}
    }
  })
  .done(function (response) {
      document.getElementById("save-icon").classList.add("far");
      document.getElementById("save").innerHTML="Save";
  })
  .fail(function () {
      console.log('failure');
  });
} else {
    $.ajax({
        url: "/save-product",
        cache: false,
        data: {
            slug: productSlug,
            userId: {{ $userId }}
        }
    })
        .done(function (response) {
            document.getElementById("save-icon").classList.add("fas");
            document.getElementById("save").innerHTML = "Saved!";
        })
        .fail(function () {
            console.log('failure');
        });
}

Step 4: Create A Laravel Controller

And Last to update query in Database to Save and unsave Product Details.

public function unsave(Request $request) {
    $product = product::where('slug', $request->input('slug'))->first();
    $savedProduct = savedProducts::where([
        ['user_id', $request->input('userId')],
        ['product_id', $product->id]
    ])->first();

    $savedProduct->delete();
}

public function save(Request $request) {
    $product = product::where('slug', $request->input('slug'))->first();

    $savedProduct = new savedProducts();
    $savedProduct->user_id = $request->input('userId');
    $savedProduct->product_id = $product->id;
    $savedProduct->save();
}

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

Summary

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

I hope you get an idea about Laravel Bootstrap Toggle switch Update DB field using Ajax.
I would like to have feedback on my Pakainfo.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.