Wednesday, 11 October 2017

Create Stylish Toggles Checkboxes & Use in Form with PHP Ajax

           , , , , , ,      8 comments   


This tutorial is on How to Make Stylish toggles button from Check box HTML tag by using Bootstrap Toggle Jquery plugin and after creating checkbox toggle button how can we pass value of that button into Form by using Jquery and Insert into Mysql table by using Ajax with PHP. We all know web application must be with stylish user interface, so if UI of any web application has something different then it will attract more user and user can also easily understand how can we use this application.

Bootstrap Toggle plugin will convert simple check box into highly flexible toggles button. So if user has come on site then he can understand how can use our web application. If you we have use Bootstrap for our web application UI then this plugin can be easily integrate into our application. Because this plugin is compatible with Bootstrap Library.

Suppose you have developed simple form and in this you have used checkbox tag for any purpose, but simple checkbox UI is very common and we can see in any web based application but if you want to make form something different UI for checkbox then we can use this plugin because it will convert simple checkbox into stylish toggle button with two option and user can select option and by using this plugin we can use single checkbox for select one option from two available option. This plugin will easily to user.

So, this post we have discuss how to initialize this plugin and we have also discuss some basic option like how can we define text on toggle button how can we change background color of toggle button. Then after we will seen how can we use value of toggle button as form field and lastly how can insert value of toggle button into Mysql table by using Ajax with PHP.






Source Code



<?php
//index.php
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Make Stylish Toggles Checkboxes  & Use in Form with PHP Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Make Stylish Toggles Checkboxes & Use in Form with PHP Ajax</h2><br /><br />
   <form method="post" id="insert_data">
    <div class="form-group">
     <label>Enter Name</label>
     <input type="text" name="name" id="name" class="form-control" />
    </div>
    <div class="form-group">
     <label>Define Gender</label>
     <div class="checkbox">
      <input type="checkbox" name="gender" id="gender" checked />
     </div>
    </div>
    <input type="hidden" name="hidden_gender" id="hidden_gender" value="Male" />
    <br />
    <input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 $('#gender').bootstrapToggle({
  on: 'Male',
  off: 'Female',
  onstyle: 'success',
  offstyle: 'danger'
 });

 $('#gender').change(function(){
  if($(this).prop('checked'))
  {
   $('#hidden_gender').val('Male');
  }
  else
  {
   $('#hidden_gender').val('Female');
  }
 });

 $('#insert_data').on('submit', function(event){
  event.preventDefault();
  if($('#name').val() == '')
  {
   alert("Please Enter Name");
   return false;
  }
  else
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data){
     if(data == 'done')
     {
      $('#insert_data')[0].reset();
      $('#gender').bootstrapToggle('on');
      alert("Data Inserted");
     }
    }
   });
  }
 });

});
</script>

insert.php



<?php
//insert.php

if(isset($_POST["name"]))
{
 $connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
 $query = "
 INSERT INTO tbl_users (name, gender) 
 VALUES(:name, :gender)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':name'   => $_POST['name'],
   ':gender'  => $_POST['hidden_gender']
  )
 );

 $result = $statement->fetchAll();
 if(isset($result))
 {
  echo 'done';
 }
}

?>

8 comments:

  1. Unknown24 September 2018 at 02:50

    tq working

    ReplyDelete
  2. analista29 September 2018 at 15:34

    good

    ReplyDelete
  3. Kshyhoo4 November 2018 at 06:55

    Did not work...

    ReplyDelete
  4. roseornever25 November 2018 at 11:59

    awesome ♥ thanks

    ReplyDelete
  5. mohamed ali6 May 2019 at 01:48

    awesome ♥ thanks

    ReplyDelete
  6. Unknown8 July 2019 at 15:32

    can u please tell me which part of the code i need to remove so it does not need an name

    ReplyDelete
  7. Nikhil_Joseph3 December 2019 at 21:55

    please import database enum cannot insert

    ReplyDelete
  8. BenGik444418 October 2022 at 04:14

    Thank you for this intuitive tutorial and with the video and software everything was clear. I would want to build on this by using the record inserted into the table "country_state_city_form_data" with respect to the city field where I have inserted one or more cities. How can I use the parameters in another query? Thank you for your time.

    ReplyDelete