INPUT DATA TANPA REFRESH DENGAN CHECKBOX
Follow @X_increms
Ditulis Oleh: Alfians Increms April, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi
INPUT DATA TANPA REFRESH DENGAN CHECKBOX KE DATABASE MYSQL - III
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL I dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox.
Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada, karena pembahasan ini hanya mengganti skrip radio button menjadi checkbox, adapun prinsip pola kerja dan kerangkanya kerjanya tidak ada yang berbeda, silahkan untuk mengunjungi pembahasan sebelumnya jika belum memahaminya.
Sebelum dilanjutkan ada baiknya anda memahami Artikel dibawah ini :
Input data tanpa refresh dan tanpa database
Input data tanpa refresh dan tanpa database menggunakan table
Input data tanpa refresh dengan database MySQL I
Input data tanpa refresh dengan radio Button ke database MySQL II
Jika sudah mengunjungi dan memahaminya, maka pembahasan kali ini tidaklah susah dan mengerjakannya pun tidaklah membutuhkan waktu yang lama, perhatikan contoh aktual table dibawah ini :
Anggap saja anda sudah membuat database atau mungkin menggunakan database lama, maka cukup perhatikan table CRUD Tanpa Refresh dengan checkbox ke database mySQL III dibawah ini : (anda dapat mencobanya lebih dahulu agar memahami pola & kerangka kerjanya).
CRUD DATA TANPA REFRESH DENGAN CHECKBOX KE DATABASE MYSQL III
Tambah Data| No | Nama | Jabatan | Telepon | Alamat | Kelamin | Aksi |
|---|
Kita sudah membuat contoh aktual CRUD Data tanpa refresh ke database MySQL III dengan Chechbox seperti pada contoh diatas, sebenarnya tidak berbeda dengan radio button, hanya kata perintahnya saja yang sebelumnya "radio" diganti dengan "checkbox" , Perhatikan perubahannya dibawah ini :
/* PERUBAHAN PERTAMA */
<div class="col-md-8"> <div class="form-group"><label for="kelamin">Kelamin<span required="required">*</span></label>
<input type="checkbox" name="kelamin" id="kelamin" value="Perempuan" > Perempuan
<input type="checkbox" name="kelamin" id="kelamin" value="Laki-Laki">
Laki-Laki
</div>
</div>
Hanya diganti dengan inputan yang bertype Checkbox,
/* PERUBAHAN KEDUA */
Sebelumnya menggunakan Skrip seperti dibawah ini :
$("form#FormIncremsRadio").on
("submit", function (e) {e.preventDefault();
var nama = $("#nama").val();
var jabatan = $("#jabatan").val();
var telepon = $("#telepon").val();
var alamat = $("#alamat").val();
var kelamin = $("#kelamin").val();
Maka diganti pada var kelamin = $("#kelamin").val(); menjadi var kelamin = $("input[type='checkbox']:checked").val(); perhatikan contoh dibawah ini :
$("form#FormIncremsRadio"). on ("submit", function (e) {e.preventDefault();
var nama = $("#nama").val();
var jabatan = $("#jabatan").val();
var telepon = $("#telepon").val();
var alamat = $("#alamat").val();
var kelamin = $("input[type='checkbox']:checked").val();
Kemudian masih file bertype .js juga harus diganti yang awal seperti ini $("#kelamin").val(kelamin); diganti menjadi $("input[type='checkbox']:checked"). val(kelamin); Perhatikan contoh yang sudah diganti seperti dibawah ini :
function ubahId (ubahId, nama, jabatan, telepon, alamat, kelamin) {
$("#ubahId").val(ubahId);
$("#nama").val(nama);
$("#jabatan").val(jabatan);
$("#telepon").val(telepon);
$("#alamat").val(alamat);
$("input[type='checkbox']:checked"). val(kelamin);
Jika pengguna mengikuti dari awal pembahasan ini, maka tidaklah menemukan kesulitan, bagi yang belum membaca pembahasan awal silahkan kunjungi disini : INPUT DATA TANPA REFRESH & DATABASE
Jangan lupa menggunakan Bootstrap 3.3.1 sampai dengan 4.5.3 (pilih salah satu versi yang digunakan), adapun file yang dibutuhkan yakni : Bootstrap.min.js, Bootstrap.js dan Bootstrap.min.css serta Jquery.min.js . Pada dasarnya Bootstrap.min.js sama dengan Bootstrap.js.
Silahkan membaca tentang : Makanan yang dapat mencegah dan mengobati kanker usus & kanker ganas atau cara membesarkan alat vital pria secara permanen & aman serta kuat, keras dan tahan lama kualitas khasiat tak perlu diragukan.
Anda dapat mengembangkannya atau juga bisa menambahkan sekaligus Checkbox dan Radio button secara bersamaan, dan semoga sukses.
Bagaimana dengan input data dengan checkbox dan radio button dengan refresh atau reload halaman ?, anda bisa mengunjungi kembali disini.
#input data tanpa refresh dengan checkbox
Input Data Tanpa Refresh Dengan Database MYSQL
Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
