[SELECT2] Sử dụng form + select2 + ajax + get value (ok)
Last updated
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
</head>
<body>
<select id="course_category">
<option value="">Chọn khóa học</option>
<option value="2">Giao Tiếp</option>
<option value="3">IELTS</option>
<option value="4">TOEIC</option>
<option value="5">TOEFL</option>
<option value="6">Doanh Nghiệp</option>
<option value="7">Chuyên Ngành</option>
<option value="8">Cấp tốc</option>
<option value="9">Người mới</option>
<option value="10">Trẻ em</option>
</select>
<!-- Script -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#course_category').change(function(){
var idcategory=$(this).val();
$.ajax({
url:'ajax.php',
type:'post',
data:{idcategory:idcategory},
// dataType:'html',
success:function(res){
console.log(res);
},
error:function(xhr){
console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
}
});
});
});
</script>
</body>
</html><?php
var_export($_POST);
?><?php
header('Content-Type: application/json');
require_once "dbconn.php";
require_once "sql.php";
$term = trim(strip_tags($_GET['q']));
$sql = new sql();
$countrylist = $sql->getAllCountry($term);
$country = [];
$i = 0;
foreach ($countrylist[1] as $key) {
$countrylist[1][$i]['desc'] = $key['country_code'] . ' - ' . $key['country_name'];
$countrylist[1][$i]['id'] = $key['country_code'];
$i++;
}
$country['items'] = $countrylist[1];
echo json_encode($country);
?><?php
var_export($_POST['val']);
?><?php
$dbuserx = 'root';
$dbpassx = '';
class dbconn {
public $dblocal;
public function __construct() {}
public function initDBO() {
global $dbuserx, $dbpassx;
try {
$this->dblocal = new PDO("mysql:host=localhost;dbname=selectdb;charset=latin1", $dbuserx, $dbpassx, [PDO::ATTR_PERSISTENT => true]);
$this->dblocal->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Tidak dapat konek ke database");
}
}
}
?><!DOCTYPE html>
<html>
<head>
<title>Tutorial selectDB remote ajax using jquery,php and mysql by seegatesite.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div>
<select class="select2"></select>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(".select2").select2({
placeholder: "Search country here...",
width: '175px',
ajax: {
url: "ajax.php",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term,
page: params.page
};
},
processResults: function(data) {
return {
results: data.items
};
},
cache: false
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
function formatRepo(repo) {
if(repo.loading) return repo.text;
return repo.desc;
}
function formatRepoSelection(repo) {
return repo.desc || repo.text;
}
jQuery(document).ready(function($) {
$('.select2').change(function(){
var val = $(this).val();
$.ajax({
url:'ajaxb.php',
type:'post',
data:{val},
success:function(res){
console.log(res);
},
error:function(xhr){
console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
}
});
});
});
</script>
</body>
</html><?php
class sql extends dbconn {
public function __construct() {
$this->initDBO();
}
public function getAllCountry($term) {
$term = '%' . $term . '%';
$db = $this->dblocal;
try
{
$stmt = $db->prepare("SELECT a.* FROM country a WHERE a.country_name LIKE :term OR a.country_code LIKE :term ");
$stmt->bindParam("term", $term);
$stmt->execute();
$stat[0] = true;
$stat[1] = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $stat;
} catch (PDOException $ex) {
$stat[0] = false;
$stat[1] = $ex->getMessage();
return $stat;
}
}
}
