Bootstrap Toggle switch with ajax update to mysql in PHP

Bootstrap Toggle switch with ajax update to mysql in PHP

Today, We want to share with you Bootstrap Toggle switch with ajax update to mysql in PHP.
In this post we will show you Bootstrap Toggle switch with ajax update to mysql in PHP, hear for Bootstraps Toggle switch with ajax update to mysql in PHP we will give you demo and example for implement.
In this post, we will learn about Bootstraps Toggle switch with ajax update to mysql in PHP with an example.

Bootstrap Toggle is a very highly flexible and interactive Bootstrap plugin that converts simple checkboxes into toggles class.

Example of Bootstrap Toggle using mysql and PHP

store value from on/off button in mysql database using php ajax in This Post.

Read Also:  Laravel Ajax Bootstrap Toggle switch Update MySQL

First of all you should include this js Lib.Like as a jQuery,bootstrap-toggle js and css and bootstrap js.

Include jquery

Simple header part include This libs.

index.html

This is a dynemic body part of table enabled or disabled using Bootstrap Toggle

<div class="panel-body">
<table id="example" class="table table-striped table-bordered" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Page ID</th>
<th>Page Name</th>
<th>Page Title</th>
<th>Page Keywods</th>
<th>Page Desc</th>
<th>Action</th>
<th>Status</th>
</tr>
</thead>
<tbody><!--?php $pageid=1; while($row = mysqli_fetch_array($str)) { ?-->
<tr class="odd gradeX">
<td></td>
<td></td>
<td></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"><a id="myWish" class="btn btn-danger btn-xs" href="do_logic.php?page=pages&did=<?php echo $row['pid']; ?>"><i class="glyphicon glyphicon-remove"></i> </a> <!--| <a href="" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-edit"></i> </a>--></td>
<td><!--?php if($row['status']=='0') { ?-->
<input id="toggle_<?php echo $row['pid']; ?>" name="toggle" type="checkbox" value="<?php echo $row['pid']; ?>" data-toggle="toggle" data-off="Disabled" data-on="Enabled" />
<!--?php }?-->
<!--?php if($row['status']=='1') { ?-->
<input id="toggle_<?php echo $row['pid']; ?>" checked="checked" name="toggle" type="checkbox" value="<?php echo $row['pid']; ?>" data-toggle="toggle" data-off="Disabled" data-on="Enabled" />
<!--?php }?--></td>
</tr>
<!--?php $pageid++; } ?--></tbody>
</table>
</div>

script.js

This is a main part of the logic call ajax and update with php to mysql send id and mode like mode as a true or false

Read Also:  Laravel 5.7 Toggle switch Update DB field using Ajax

<script>
      $('input[name=toggle]').change(function(){
        var mode= $(this).prop('checked');
		var id=$( this ).val();
        $.ajax({
          type:'POST',
          dataType:'JSON',
          url:'do_switch.php',
          data:{mode:mode,id:id},
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
            $("#heading").html(success);
            $("#body").html(message);
          }
        });
      });
    </script>

do_switch.php

simple here mode is true when button is enabled and mode is false when button is disabled.

<!--?php include("config/dbconnect.php"); include("config/session.php"); $mode=$_POST['mode']; $pid=$_POST['id']; if ($mode=='true') //mode is true when button is enabled { $str=$db->query("update pages SET status=1 where pid=$pid");<br ?--> $message='Hey my button is enableed!!';
$success='Enabled';
echo json_encode(array('message'=>$message,'$success'=>$success));
}

else if ($mode=='false')
{
$str=$db->query("update pages SET status=0 where pid=$pid");
$message='Hey my button is disable!!';
$success='Disabled';
echo json_encode(array('message'=>$message,'success'=>$success));

}
?>

View Demo