Bootstrap Toggle switch Update Database field using Ajax

Bootstrap Toggle switch Update Database field using Ajax

Welcome to the In w2way.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Bootstrap Toggle switch Update Database field using Ajax

Simple in this post explain to the Store Value from closed/open Button in onchange or clicked to MySQL Database store Using PHP Ajax dynemically. and Selected value each checkbox either it may be closed/open, it will be all the status stored in database.(Like as a mysql database)

Include Libs with jquery for toggle switch with ajax update to mysql

First of all the simple include the script in header part.

Also Read :  Angular 6 applications - Insert, Fetch , Edit - update , Delete Operations

<head>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <link href="bootstrap-toggle.min.css" rel="stylesheet">
  <script src="bootstrap-toggle.min.js"></script>
</head>

Page Name : index.html for toggle switch with ajax update to mysql

display all the dynemically response_result print here in this page using php with html.

<div class="panel-body">
<table border="3">
    <thead>
        <tr>
            <th>Invoice ID</th>
            <th>Invoice Name</th>
            <th>Invoice Title</th>
            <th>Invoice Keywods</th>
            <th>Invoice Desc</th>
            <th>Action</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
    <?php
    $pageid=1;
        while($result_data = mysqli_fetch_array($str))
        {
             
    ?>
        <tr class="odd gradeX">
            <td><?php echo $pageid;?></td>
            <td><?php echo $result_data['invoicename'];?></td>
            <td><?php echo $result_data['invoicetitle'];?></td>
            <td class="center"><?php echo $result_data['invoicekeywords'];?></td>
            <td class="center"><?php echo $result_data['invoicepdescseo'];?></td>
            <td class="center"><a href="do_action.php?page=invoice&did=<?php echo $result_data['productid']; ?>"  onclick="return confirm('Are you sure?')" class="btn btn-danger btn-xs" id="myWish"><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($result_data['status']=='0')
        {
            ?>
             <input type="checkbox" name="toggle" id="toggle_<?php echo $result_data['productid']; ?>" value="<?php echo $result_data['productid']; ?>" data-toggle="toggle" data-off="Closed" data-on="Open">
            <?php
        }?>
        <?php if($result_data['status']=='1')
        {
            ?>
             <input type="checkbox" name="toggle" id="toggle_<?php echo $result_data['productid']; ?>" value="<?php echo $result_data['productid']; ?>" data-toggle="toggle" data-off="Closed" data-on="Open" checked>
            <?php
        }?>
        </td>
        </tr>
    <?php
    $pageid++;
        }
    ?>
    </tbody>
</table>
</div>

Script.js for toggle switch with ajax update to mysql

simple request this page and all the response_result get and change to dynemically data result_data and show open or closed.

Also Read :  Publishing Ionic app to Google Play Store App Release

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

do_action.php for toggle switch with ajax update to mysql

update the value and status in call this file to database query executes.

<?php
include("config/dbconnect.php");
include("config/session.php");
$mode=$_POST['mode'];
$productid=$_POST['id'];
if ($mode=='true') //mode simple is true when button is Open 
{
    $str=$db->query("update invoice SET status=1 where productid=$productid");
    $response_result='Hey my button is open!!';
    $success='Open';
    echo json_encode(array('response_result'=>$response_result,'$success'=>$success));
}
 
else if ($mode=='false') 
{
    $str=$db->query("update invoice SET status=0 where productid=$productid");
    $response_result='Hey my button is closed!!';
    $success='Closed';
    echo json_encode(array('response_result'=>$response_result,'success'=>$success));
 
} 
 ?>

Example

toggle switch with ajax update | Save Bootstrap Toggle checkbox to database without postback using AJAX
| bootstrap toggle button | store value from on/off button in mysql database using php ajax

Add a Comment

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