Tutorial AJAX PHP

Insert Checkbox Menggunakan Ajax Jquery PHP

Insert Checkbox Menggunakan Ajax Jquery PHP

Tutorial Insert Checkbox Menggunakan Ajax Jquery PHP ini membahas bagaimana cara menyimpan data dari elemen checkbox ke database menggunakan AJAX PHP tanpa merefresh halaman atau reload. Develindo.com

Ikuti langkah berikut ini.
Buat database dengan nama praktek dan buat tabel dengan nama tb_bahasa

Setelah anda membuat database selanjutnya buat file koneksi.php untuk mengkoneksikan ke database server

koneksi.php
 

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');
//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
 or die('Koneksi Ke database Error'); //mengkoneksikan dengan server 
jika tidak akan muncul pesan error
mysql_select_db($database) or 
die('Database Tidak Ditemukan');   //mengkoneksikan dengan database jika
 tidak akan muncul pesan database tidak ada
?>


Selanjutnya buat file index.php untuk menampilkan form input.

index.php
 

<!DOCTYPE html>
<html>
<head>
    <title>Develindo | Ajax PHP - Insert Edit Record Menggunakan Ajax php</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="dist/css/bootstrapValidator.css" />
    <!-- Bootstrap core JavaScript-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <!-- validator -->
    <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
</head>
<body>
    <br /><br />
    <div class="container" style="width:800px;">
        <h2 align="center">Insert Checkbox Menggunakan Ajax Jquery PHP</h2>
        <br>
        <div class="container" style="width:500px;">
                <p>Pilih Bahasa Pemrograman</p>
                <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 />
                     <input type="checkbox" class="get_value" value="HTML" />HTML <br />
                     <input type="checkbox" class="get_value" value="Node.js" />Node.js <br />
                     <input type="checkbox" class="get_value" value="Ruby" />Ruby <br />
                     <input type="checkbox" class="get_value" value="Javascript" />Javascript <br />
                     <input type="checkbox" class="get_value" value="C#" />C# <br />
                </div>
                <button type="button" name="submit" class="btn btn-info" id="submit">Submit</button>
                <br />
                <div id="result"></div>
           </div>
           </div>
      </body>
 </html>
 <script>
 $(document).ready(function(){
      $('#submit').click(function(){
           var bahasa = [];
           $('.get_value').each(function(){
                if($(this).is(":checked"))
                {
                     bahasa.push($(this).val());
                }
           });
           bahasa = bahasa.toString();
           $.ajax({
                url:"insert.php",
                method:"POST",
                data:{bahasa:bahasa},
                success:function(data){
                     $('#result').html(data);
                }
           });
      });
 });
 </script>



Setelah selesai anda dapat mencoba menjalankan di localhost.

Perhatikan script index.php terdapat link eksternal seperti js dan CSS yang perlu anda tambahkan.

Selamat Mencoba. Terimakasih

Insert Checkbox Menggunakan Ajax Jquery PHP


 

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website