Cara Memasukan data dengan Checkbox ajax jQuery

Setelah kemarin kita sudah berhasil memasukan dengan sebuah radio button, dengan memilih salah satu data dengan radio button dimana kita memilih maka akan langsung masuk ke database, agak sedikit berbeda dengan cara memasukan data dengan checkbox ajax jQuery, karena jika radio hanya memilih salah satu, jika radio kita bisa memilih lebih dari satu, seperti apa simak terus ya teman-teman.

Untuk khusus cara memasukan data dengan checkbox ini tidak seperti kemarin dimana ketika kita memlih salah satu langsung ke database, disini saya akan menambahkan sebuah button karena nantinya data akan masuk itu kita pilih dulu mana baru kita input ke database, jadi silahkan teman-teman siapkan terlebih dahulu wadah untuk databasenya ya temant-teman.

Oke langsung saja, seperti biasa silahkan teman-teman ikuti, di coba ya

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h1 class="text-center">Cara Memasukan data dengan Checkbox ajax jQuery</h1>
				<div class="input-group mt-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" value="HTML" class="get_check">
						</div>
					</div>
					<input type="text" class="form-control"value="HTML" disabled="">
				</div>
				<div class="input-group mt-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" value="CSS" class="get_check">
						</div>
					</div>
					<input type="text" class="form-control" value="CSS" disabled="">
				</div>
				<div class="input-group mt-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" value="Bootstrap" class="get_check">
						</div>
					</div>
					<input type="text" class="form-control" value="Bootstrap" disabled="">
				</div>
				<div class="input-group mt-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" value="PHP" class="get_check">
						</div>
					</div>
					<input type="text" class="form-control" value="PHP" disabled="">
				</div>
				<div class="input-group mt-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" value="Javascript" class="get_check">
						</div>
					</div>
					<input type="text" class="form-control" value="Javascript" disabled="">
				</div>
				<button class="btn btn-block btn-primary mt-3" id="insert">Insert</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<div id="result" class="d-none mt-5 text-center"></div>
			</div>
		</div>
	</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(document).ready(function(){
		$("#insert").click(function(){
			var materi = [];
			$(".get_check").each(function(){
				if($(this).is(":checked")){
					materi.push($(this).val());
				}
			});
			materi = materi.toString()
			$.ajax({
				url: "proses.php",
				method: "POST",
				data: {materi: materi},
				success: function(data){
					$("#result").removeClass("d-none")
					$("#result").addClass("d-block")				
					$("#result").html(data)
					setTimeout(function(){
						$("#result").removeClass("d-block")
						$("#result").addClass("d-none")
					}, 3000)
				}
			})
		})
	})
</script>
</body>
</html>

Dan disini saya menggunakan ajax jQuery data yang kita pilih akan kita tampung di sebuah array, dimana data yang masuk ke array tersebut akan kita pilih dengan is(“:checked”) dan each, lalu data tersebut kita lempar ke webservicenya seperti ini

<?php  
$koneksi = mysqli_connect("localhost", "root", "", "data_materi");

if(isset($_POST["materi"])){
	$query = "INSERT INTO tbl_kategori_materi(materi) VALUES ('".$_POST["materi"]."') ";
	$result = mysqli_query($koneksi, $query);
	echo "data berhasil di masukan";
}

?>

Untuk webservicenya teman-teman sudah paham ya, disini kita menggunakan insert dan kita buat laporan jika berhasil data di masukan, jika kita lihat maka yang terjadi hasilnya akan seperti ini:

Sebelum di pilih

Sesudah dipilih

Dan jika dilihat ke database maka data akan tambah

Bagaimana? Disini kita belum membuat sebuah 1 check dimana ketika di pilih akan terpilih semua, oke saya rasa untuk cara memasukan data dengan checkbox sudah jelas ya, dan saya rasa cukup sampai disini, sampai jumpa pada artikel berikutnya terimakasih.

Cara Memasukan data dengan Checkbox ajax jQuery

Kategori