Cara Insert Nilai Checkbox Dengan Ajax JQuery di PHP -

Hallo Sahabat Dumet School, bagaimana kabarnya semoga selalu dalam keadaan sehat dan selalu semangat yaaa. Dalam kesempatan kali ini saya akan membahas tentang cara Insert Nilai Checkbox Dengan AJax Jquery di PHP. Dalam sebuah program tentu sahabat pengen banyak referensi dalam membuat suatu program, yaaa disini salah satunya akan kita bahas nih bagaimana cara mari ikutin langkah-langkah berikut ini:

Langkah pertama buat file php untuk simpan struktur HTMLnya ,coba ketikkan code dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div class="container my-5">
		<div class="row">
			<h3 class="text-center">Cara Insert Nilai pada Checkbox Dengan Ajax JQuery di PHP</h3>
		</div>
		<div class="box">
			<input type="checkbox" class="value1" value="Photographer"> Photographer <br>
			<input type="checkbox" class="value1" value="Model"> Model <br> 
			<input type="checkbox" class="value1" value="Influencer"> Influencer <br>
			<input type="checkbox" class="value1" value="Blogger"> Blogger <br>
			<input type="checkbox" class="value1" value="Vlogger"> Vlogger <br>
		</div>
		<button type="button" name="klik" class="btn btn-primary my-3" id="klik">Tambah</button>
	<br>
	<span id="result" class="bg-success mt-3"></span>
	</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

pada code diatas saya menambahkan plugin dari library jquery dan bootstrap, dan ada 5 checkbox yang dipakai sebagai contoh saja. Sebelum kelangkah selanjutnya sahabat buat terlebih dahulu database seperti dibawah ini:

Langkah yang kedua sekarang buat file php untuk menampung perintah insert data kedalam sebuah database, lihat code berikut ini:

<?php 

 if(isset($_POST["profesi"]))
 {
 	$conn = mysqli_connect("localhost","root","","test");
 	$query = "INSERT INTO tb_profesi(nm_profesi) VALUES ('".$_POST['profesi']."')";
 	$result = mysqli_query($conn, $query);
 	echo 'Data Berhasil Ditambah';
 }

 	?>

Dan langkah selanjutnya tambah script jquery kedalam file php yang terdapat htmlnya pada script file pertama, lalu ketikkan seperti dibawah ini :

<script>
		$(document).ready(function(){
			$('#klik').click(function() {
				var profesi = [];
				$('.value1').each(function(){
					if($(this).is(":checked"))
					{
						profesi.push($(this).val());
					}
				});
				profesi = profesi.toString();

				$.ajax({
					url:"tambah.php",
					method:"POST",
					data:{profesi:profesi},
					success:function(data){
						$('#result').html(data);
					}
				})
			})
		})
	</script>

Jika sudah simpan kedua file tersebut lalu jalankan pada browser masing-masing, berikut ini adalah tampilannya :

Saya akan pilih salah salah data pada checkbox, jika sudah benar maka akan tersimpan kedalam database dan berikut ini tampilannya:

Demikian pembahasan artikel kali ini tentang cara Insert Nilai Checkbox Dengan AJax Jquery di PHP, semoga bermanfaat dan sampai jumpa lain kesempatan.

terima kasih

Cara Insert Nilai Checkbox Dengan Ajax JQuery di PHP

Kategori