Hello guys,
After a long time, I am back with a new interesting tutorial article on how to make an active/inactive system for a user or anything for your project using the bootstrap switch instead of a drop-down. Don’t worry, It’s very very simple and I will describe all these things and share my programming skeleton for you. Just follow my steps –
Step 1 :-
Download Material Switch design by here.
Step 2 : –
Choose any one from the switch designs and need to give a dynamic ID for each switch. Don’t understand?? See the example below and you will see how I made this everything is there in this below code.
My HTML and PHP code looks like this
<table class="table table-bordered"> <tr> <th>#</th> <th>Name</th> <th>Mobile</th> <th>Active/Inactive</th> </tr> <?php $qry = mysqli_query($con,"SELECT * from switch_test ORDER BY id desc"); while($data = mysqli_fetch_assoc($qry)){ ?> <tr> <td><?php echo $data['id']; ?></td> <td><?php echo $data['name']; ?></td> <td><?php echo $data['mobile']; ?></td> <td> <?php if($data['status'] == 1){ ?> <div class="material-switch pull-right"> <input onchange="active_inactive_product(<?php echo $data['id']; ?>)" id="switch<?php echo $data['id']; ?>" name="someSwitchOption001" checked type="checkbox"/> <label for="switch<?php echo $data['id']; ?>" class="label-primary"></label> </div> <?php } else{?> <div class="material-switch pull-right"> <input onchange="active_inactive_product(<?php echo $data['id']; ?>)" id="switch<?php echo $data['id']; ?>" name="someSwitchOption001" type="checkbox"/> <label for="switch<?php echo $data['id']; ?>" class="label-primary"></label> </div> <?php } ?> </td> </tr> <?php } ?> </table>
And my Javascript looks like this
function active_inactive_product(id){ if(this.checked == true){ var checkboxValue = $('#switch'+id).prop('checked'); } else{ var checkboxValue = $('#switch'+id).prop('checked'); } if(checkboxValue == true){ //Write here your ajax code for Active alert("I am going to Active this row"); } if(checkboxValue == false){ //Write here your ajax code for Deactive alert("I am going to Deactive this row"); } }
If you have any problem regarding to make this do comment in below comment section, I will give you answer shortly.
Related posts