Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Select2 tidak berjalan
halo agan2, saya membuat dropdown search menggunakan select2 namun tidak berfungsi.mohon arahannya.
berikut sorce codenya
<div class="col-md-6">
<label>Sample 1<span style="color: red">*</span></label>
<select name="sample1" class="form-select" required id="sample1" onchange="sample_1()" aria-label=".form-select-lg example">
<option disabled selected>-Select Item-</option>
<?php
include "koneksi.php";
$sql=mysqli_query($koneksi,"SELECT * FROM productlist order by nama ASC");
while ($data = mysqli_fetch_array($sql)){
?>
<option value="<?=$data['nama'];?>"><?php echo $data['nama'];?></option>
<?php
}
?>
</select>
<!-- ajax for autofill credit account -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function sample_1(){
var sample1 = $("#sample1").val();
$.ajax({
url : 'sample_ajax_1.php',
data : "sample1="+sample1,
}).success(function (data){
var json = data,
obj = JSON.parse(json);
$('#code1').val(obj.code1);
})
}
</script>
<!-- scrip fitur search pada select box -->
<script type="text/javascript">
$(document).ready(function() {
$('#sample1').select2({
placeholder: 'Pilih Customer',
allowClear: true
});
});
</script>
</div>
ini full code nya
<?php
session_start();
// cek apakah yang mengakses halaman ini sudah login
if($_SESSION['jabatan']==""){
header("location:login.php?pesan=gagal");
}
?>
<!DOCTYPE html>
<html>
<head>
<!-- Start Header -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<!-- Load file CSS Bootstrap offline -->
<!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- UIkit CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/css/uikit.min.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/css/fontawesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link type="text/css" href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
<link type="text/css" href='https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css' rel='stylesheet'>
<link type="text/css" href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css' rel='stylesheet'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/Start/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--javascript external load-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/js/fontawesome.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<!-- UIkit JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.8/js/uikit-icons.min.js"></script> -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.jquery.com/jquery-latest.js">
</script><script src="datepicker/jquery341.js"></script>
<script src="datepicker/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="datepicker/datepicker.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- tanda pemisah titik -->
<script type="text/javascript" src="bootstrap/js/my.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
</head>
<!-- End Header -->
<br/>
<nav class="navbar navbar-light bg-light">
<div class="btn-group" role="group" aria-label="Basic example">
<a href="sample_index.php" class="btn btn-outline-primary btn-sm">VIEW DATA</a>
<a href="#" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#pelangganModal">+ NEW CUSTOMER</a>
<a href="dashboard.php" class="btn btn-outline-warning btn-sm">DASHBOARD</a>
<a href="logout.php" class="btn btn-outline-danger btn-sm">LOG OUT</a>
</div>
</nav>
<br/>
<h4>TAMBAH PERMINTAAN SAMPLE</h4>
<p style="color: red">*) Required</p>
<?php
// https://www.malasngoding.com
// menghubungkan dengan koneksi database
include 'koneksi.php';
// mengambil data barang dengan kode paling besar
$query = mysqli_query($koneksi, "SELECT max(kode) as kodeTerbesar FROM sample");
$data = mysqli_fetch_array($query);
$kodeBarang = $data['kodeTerbesar'];
// mengambil angka dari kode barang terbesar, menggunakan fungsi substr
// dan diubah ke integer dengan (int)
$urutan = (int) substr($kodeBarang, 5, 5);
// bilangan yang diambil ini ditambah 1 untuk menentukan nomor urut berikutnya
$urutan++;
// membentuk kode barang baru
// perintah sprintf("%03s", $urutan); berguna untuk membuat string menjadi 3 karakter
// misalnya perintah sprintf("%03s", 15); maka akan menghasilkan '015'
// angka yang diambil tadi digabungkan dengan kode huruf yang kita inginkan, misalnya BRG
$huruf = "RSP21";
$kodeBarang = $huruf . sprintf("%04s", $urutan);
?>
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="GET">
<div class="input-group mb-3">
<select name="kode" id="kode" class="form-control">
<?php
include "koneksi.php";
//query menampilkan nip pegawai ke dalam combobox
$query =mysqli_query($koneksi, "SELECT * FROM pelanggan ORDER BY kode asc");
while ($data = mysqli_fetch_array($query)) {
?>
<option value="<?=$data['kode'];?>"><?php echo $data['pelanggan'];?></option>
<?php
}
?>
</select>
<button type="submit" name="submit" class="btn btn-outline-secondary btn-sm">PILIH</button>
</div>
</form>
<?php
if (isset($_GET['kode'])) {
$kode=$_GET['kode'];
//menampilkan data pegawai berdasarkan pilihan combobox ke dalam form
$tamPeg=mysqli_query($koneksi, "SELECT * FROM pelanggan WHERE kode='$kode'");
$tpeg = mysqli_fetch_array($tamPeg);
?>
<?php
if (isset($_SESSION['username'])) {
$username=$_SESSION['username'];
$sales=mysqli_query($koneksi, "SELECT * FROM user WHERE username='$username'");
$tsales = mysqli_fetch_array($sales);
?>
<form method="post" action="sample_tambah_aksi.php" class="row g-3">
<div class="col-md-12">
<label>Request ID</label>
<input type="text" name="kode" class="form-control" required="required" value="<?php echo $kodeBarang ?>" readonly />
</div>
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" name="customer" class="form-control" required="required" readonly value="<?php echo $tpeg['pelanggan']; ?>" placeholder="Masukan nama customer (perusahaan/perorangan)" autocomplete="off"/>
</div>
<div class="col-md-6">
<label>PIC<span style="color: red">*</span></label>
<input type="text" name="pic" class="form-control" required="required" value="<?php echo $tpeg['attn']; ?>"placeholder="Masukan nama PIC penerima sample" autocomplete="off"/>
</div>
<div class="col-md-6">
<label>Delivery Date<span style="color: red">*</span></label>
<input type="date" name="date" class="form-control" required="required" placeholder="Masukan tanggal pengiriman sample" />
</div>
<div class="col-md-6">
<label>Sales</label>
<input type="text" name="sales" class="form-control" required="required" readonly value="<?php echo $tsales['nama']; ?>" autocomplete="off"/>
</div>
<!-- Sample1 -->
<div class="col-md-6">
<label>Sample 1<span style="color: red">*</span></label>
<select name="sample1" class="form-select" required id="sample1" onchange="sample_1()" aria-label=".form-select-lg example">
<option disabled selected>-Select Item-</option>
<?php
include "koneksi.php";
$sql=mysqli_query($koneksi,"SELECT * FROM productlist order by nama ASC");
while ($data = mysqli_fetch_array($sql)){
?>
<option value="<?=$data['nama'];?>"><?php echo $data['nama'];?></option>
<?php
}
?>
</select>
<!-- ajax for autofill credit account -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function sample_1(){
var sample1 = $("#sample1").val();
$.ajax({
url : 'sample_ajax_1.php',
data : "sample1="+sample1,
}).success(function (data){
var json = data,
obj = JSON.parse(json);
$('#code1').val(obj.code1);
})
}
</script>
<!-- scrip fitur search pada select box -->
<script type="text/javascript">
$(document).ready(function() {
$('#sample1').select2({
placeholder: 'Pilih Customer',
allowClear: true
});
});
</script>
</div>
<div class="col-md-6">
<label>Product Code<span style="color: red">*</span></label>
<input type="text" name="code1" id="code1" class="form-control" placeholder="Masukan kode produk (untuk regular produk)" autocomplete="off">
</div>
<div class="col-md-4">
<input type="number" name="qty1" class="form-control" required placeholder="Masukan quantity yang diminta" autocomplete="off">
</div>
<div class="col-md-2">
<select name="unit1" class="form-select" required aria-label=".form-select-lg example">
<option disabled selected>Pilih Unit</option>
<?php
include "koneksi.php";
//query menampilkan nip pegawai ke dalam combobox
$query =mysqli_query($koneksi, "SELECT * FROM support WHERE unit IS NOT NULL ORDER BY unit asc");
while ($data = mysqli_fetch_array($query)) {
?>
<option value="<?=$data['unit'];?>"><?php echo $data['unit'];?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6">
<input type="text" name="note1" class="form-control" placeholder="Note's" autocomplete="off">
</div>
<!-- Sample2 -->
<div class="col-md-6">
<label>Sample 2</label>
<select name="sample2" class="form-select" required id="sample2" onchange="sample_2()" aria-label=".form-select-lg example">
<option disabled selected>-Select Item-</option>
<?php
include "koneksi.php";
$sql=mysqli_query($koneksi,"SELECT * FROM productlist order by nama ASC");
while ($data = mysqli_fetch_array($sql)){
?>
<option value="<?=$data['nama'];?>"><?php echo $data['nama'];?></option>
<?php
}
?>
</select>
<!-- ajax for autofill credit account -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function sample_2(){
var sample2 = $("#sample2").val();
$.ajax({
url : 'sample_ajax_2.php',
data : "sample2="+sample2,
}).success(function (data){
var json = data,
obj = JSON.parse(json);
$('#code2').val(obj.code2);
})
}
</script>
<!-- scrip fitur search pada select box -->
<script type="text/javascript">
$(document).ready(function() {
$('#sample2').select2({
placeholder: 'Pilih Item',
allowClear: true
});
});
</script>
</div>
<div class="col-md-6">
<label>Product Code</label>
<input type="text" name="code2" id="code2" class="form-control" placeholder="Masukan kode produk (untuk regular produk)"autocomplete="off">
</div>
<div class="col-md-4">
<input type="number" name="qty2" class="form-control" placeholder="Masukan quantity yang diminta" autocomplete="off">
</div>
<div class="col-md-2">
<select name="unit2" class="form-select" aria-label=".form-select-lg example">
<option disabled selected>Pilih Unit</option>
<?php
include "koneksi.php";
//query menampilkan nip pegawai ke dalam combobox
$query =mysqli_query($koneksi, "SELECT * FROM support WHERE unit IS NOT NULL ORDER BY unit asc");
while ($data = mysqli_fetch_array($query)) {
?>
<option value="<?=$data['unit'];?>"><?php echo $data['unit'];?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6">
<input type="text" name="note2" class="form-control" placeholder="Note's" autocomplete="off">
</div>
<!-- Sample3 -->
<div class="col-md-6">
<label>Sample 3</label>
<select name="sample3" class="form-select" required id="sample3" onchange="sample_3()" aria-label=".form-select-lg example">
<option disabled selected>-Select Item-</option>
<?php
include "koneksi.php";
$sql=mysqli_query($koneksi,"SELECT * FROM productlist order by nama ASC");
while ($data = mysqli_fetch_array($sql)){
?>
<option value="<?=$data['nama'];?>"><?php echo $data['nama'];?></option>
<?php
}
?>
</select>
<!-- ajax for autofill credit account -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function sample_3(){
var sample3 = $("#sample3").val();
$.ajax({
url : 'sample_ajax_3.php',
data : "sample3="+sample3,
}).success(function (data){
var json = data,
obj = JSON.parse(json);
$('#code3').val(obj.code3);
})
}
</script>
<!-- scrip fitur search pada select box -->
<script type="text/javascript">
$(document).ready(function() {
$('#sample3').select2({
placeholder: 'Pilih item',
allowClear: true
});
});
</script>
</div>
<div class="col-md-6">
<label>Product Code</label>
<input type="text" name="code3" id="code3" class="form-control" placeholder="Masukan kode produk (untuk regular produk)"autocomplete="off">
</div>
<div class="col-md-4">
<input type="number" name="qty3" class="form-control" placeholder="Masukan quantity yang diminta" autocomplete="off">
</div>
<div class="col-md-2">
<select name="unit3" class="form-select" aria-label=".form-select-lg example">
<option disabled selected>Pilih Unit</option>
<?php
include "koneksi.php";
//query menampilkan nip pegawai ke dalam combobox
$query =mysqli_query($koneksi, "SELECT * FROM support WHERE unit IS NOT NULL ORDER BY unit asc");
while ($data = mysqli_fetch_array($query)) {
?>
<option value="<?=$data['unit'];?>"><?php echo $data['unit'];?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6">
<input type="text" name="note3" class="form-control" placeholder="Note's" autocomplete="off">
</div>
<div class="form-group">
<input type="hidden" name="status" class="form-control" value="PENDING" />
<input type="hidden" name="remarks" class="form-control" value=""/>
<input type="hidden" name="username" class="form-control" value="<?php echo $tsales['username']; ?>"/>
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
<?php
}
?>
<?php
}
?>
</div>
</br>
<!-- scrip fitur search pada select box -->
<script type="text/javascript">
$(document).ready(function() {
$('#kode').select2({
placeholder: 'Pilih Customer',
allowClear: true
});
});
</script>
<!-- Generate kode new customer -->
<?php
include 'koneksi.php';
// mengambil data barang dengan kode paling besar
$query = mysqli_query($koneksi, "SELECT max(kode) as kodeTerbesar FROM pelanggan");
$data = mysqli_fetch_array($query);
$kodePelanggan = $data['kodeTerbesar'];
$urutan = (int) substr($kodePelanggan, 5, 5);
$urutan++;
$huruf = "CUS";
$kodePelanggan = $huruf . sprintf("%04s", $urutan);
?>
<!-- Tambah Pelanggan Modal -->
<div class="modal fade" id="pelangganModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Customer Registration</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post" action="sample_tambah_pelanggan_aksi.php" class="row g-3">
<div class="col-md-12">
<label>Customer ID</label>
<input type="text" name="kode" class="form-control" required="required" value="<?php echo $kodePelanggan ?>" readonly />
</div>
<div class="col-md-12">
<label>Customer Name<span style="color: red">*</span></label>
<input type="text" name="pelanggan" class="form-control" required="required" onkeyup="this.value = this.value.toUpperCase()" placeholder="ex : CANTIKA BEAUTY ESTETIK, PT" autocomplete="off" />
</div>
<div class="col-md-6">
<label>PIC<span style="color: red">*</span></label>
<input type="text" name="attn" class="form-control" required="required" placeholder="ex : Bpk. Budi" autocomplete="off" />
</div>
<div class="col-md-6">
<label>Telephone<span style="color: red">*</span></label>
<input type="text" name="telp" class="form-control" required placeholder="ex : 0811111111" autocomplete="off">
</div>
<div class="col-md-12">
<label>Address<span style="color: red">*</span></label>
<input type="text" name="alamat" class="form-control" required="required" placeholder="ex : Jl. Mawar Blok A4 No. 100" autocomplete="off"/>
</div>
<div class="col-md-5">
<label>City<span style="color: red">*</span></label>
<input type="text" name="kota" class="form-control" required="required" placeholder="ex : Jakarta Barat" autocomplete="off"/>
</div>
<div class="col-md-5">
<label>Province<span style="color: red">*</span></label>
<input type="text" name="provinsi" class="form-control" required="required" placeholder="ex : DKI Jakarta" autocomplete="off"/>
</div>
<div class="col-md-2">
<label>ZIP<span style="color: red">*</span></label>
<input type="text" name="zip" required="required" class="form-control" placeholder="15882" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" name="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End Tambah Pelanggan Modal -->
<!-- Footer -->
<?php include ('template/footer.php');?>
<!-- End Footer -->
<!-- Scroll to Top -->
<a href="#" class="scroll-up"><i class="fa fa-arrow-up"></i></a>
<!-- End Scroll To Top -->
</body>
</html>
0
Tanggapan
kendalanya apa yaa ? ? dropdown tidak muncul,, search tidak bekerja,, select option tidak bekerja,, dll ? ?
search nya tidak bekerja gan, hanya muncul dropdown saja
apakah pada bagian namanya ada data yang sama? <option value="<?=$data['nama'];?>"><?php echo $data['nama'];?></option> jika pada atribute value ada data yang sama maka optionnya tidak akan muncul
1 Jawaban:
<div>Pengalaman saya ketika menggunakan select2, baik single/multiple selection, selec2 sudah menyediakan fitur search pada tag inputnya. Jadi meskipun kita ga menambahkan fitur search pada select2, select2 sudah menyediakannya untuk developernya.<br>Atau coba kamu jelaskan tujuannya mau seperti apa, apa yg sudah dilakukan. karena saya liat disitu ada script untuk ajax request juga. </div>
0
Tanggapan
halo ka, terimakasih responnya. saya ingin di form sample1 itu berupa form select yang ambil datanya dari database, plus ada fitur search karena kalau tidak ada search agak sulit krn data dropdownnya banyak sekali. scrip ajax itu untuk menampilkan kode sampel pada field code secara otomatis berdasarkan hasil pilihan pada field sample 1..