Monday 27 June 2016

Insert Checkbox values using Ajax Jquery in PHP

           , , ,      6 comments   

If you are looking for tutorial on how can we insert checkbox values to mysql table by using Ajax with JQuery in PHP without page refresh. Suppose you have working on any web application and in that application when user check the checkbox then at that time the value of that checkbox must be insert into mysql table without refreshing page by using Ajax with JQuery in PHP Programming. For describing this things I have one mysql table I will insert checkbox value into that table. I have define checkboxes with values like how many programming languages you have known, when user select more than one language checkbox then all value of checkbox store into an array using Jquery and I will convert that array to string and by using Jquery ajax method I will insert values of all checkboxs to table by using PHP script. If you wanted to learn with detail description, you can watch video which you can find top of this post.

Source Code

Database


 --  
 -- Table structure for table `tbl_language`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_language` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` varchar(100) NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  
 --  
 -- Dumping data for table `tbl_language`  
 --

insert_checkbox.php


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Insert Checkbox values using Ajax Jquery in PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.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.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:500px;">  
                <h3 class="text-center">Insert Checkbox values using Ajax Jquery in PHP</h3>  
                <div class="checkbox">  
                     <input type="checkbox" class="get_value" value="PHP" />PHP <br />  
                     <input type="checkbox" class="get_value" value="ASP" />ASP <br />  
                     <input type="checkbox" class="get_value" value="JSP" />JSP <br />  
                     <input type="checkbox" class="get_value" value="Python" />Python <br />                      
                </div>       
                <button type="button" name="submit" class="btn btn-info" id="submit">Submit</button>  
                <br />  
                <div id="result"></div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#submit').click(function(){  
           var languages = [];  
           $('.get_value').each(function(){  
                if($(this).is(":checked"))  
                {  
                     languages.push($(this).val());  
                }  
           });  
           languages = languages.toString();  
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{languages:languages},  
                success:function(data){  
                     $('#result').html(data);  
                }  
           });  
      });  
 });  
 </script>

insert.php


 <?php  
 //insert.php  
 if(isset($_POST["languages"]))  
 {  
      $connect = mysqli_connect("localhost", "root", "", "testing");  
      $query = "INSERT INTO tbl_language(name) VALUES ('".$_POST["languages"]."')";  
      $result = mysqli_query($connect, $query);  
      echo 'Check Box Data Inserted';  
 }  
 ?>

6 comments:

  1. mini-youtube.com1 May 2018 at 11:03

    thanks for this

    but i have a case to fetch data from mysqli when checkbox is checked search by checkbox value loop to bring data like this all checkbox values

    ReplyDelete
  2. mini-youtube.com1 May 2018 at 11:45

    can you help me please it looks like this search page exactly what i mean
    https://deals.souq.com/eg-en/best-deals/c/6370

    ReplyDelete
  3. Gaurav Pathak14 May 2019 at 05:07

    nice work bro..thx

    ReplyDelete
  4. KOKI1 February 2020 at 06:58

    mucha gracias me a sido de mucha ayuda

    ReplyDelete
  5. KOKI1 February 2020 at 06:58

    gracias

    ReplyDelete
  6. KOKI1 February 2020 at 06:59

    muchas gracias me a sido de ayuda

    ReplyDelete