I need to fill the states list on a dropdown when country is selected.
My code
view
<div class="form-group col-md-6">
<label for="inputEmail4" class="uppercase pull-left m-0">Country</label>
<!-- <input type="text" id="country" name="country" required value="<?php echo $row_all->country;?>" placeholder="Please enter your country name"> -->
<select name="country" id="country" required>
<option value="">--select country--</option>
<?php
if($countries->num_rows()>0)
{
foreach ($countries->result() as $countries_row) {
?>
<option <?php if($countries_row->id==$row_all->countryid){ echo "selected"; }?> value="<?php echo $countries_row->id;?>"><?php echo $countries_row->name;?></option>
<?php
} } ?>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4" class="uppercase pull-left m-0">State</label>
<select name="state" id="state" >
</select>
</div>
<script type='text/javascript'>
// baseURL variable
var baseURL= "<?php echo base_url();?>";
$(document).ready(function(){
// City change
$('#country').change(function(){
var country = $(this).val();
alert(country);
// AJAX request
$.ajax({
url:'<?php echo base_url()?>main/get_states',
method: 'post',
data: {country: country},
dataType: 'json',
success: function(response){
alert(response);
// Remove options
//$('#state').find('option').not(':first').remove();
//$('#city').find('option').not(':first').remove();
// Add options
$.each(response,function(get_states,data){
$('#state').append('<option value="'+data['id']+'">'+data['name']+'</option>');
});
}
});
});
});
</script>
controller
function get_states()
{
$this->load->helper('url');
$postData = $this->input->post();
$this->load->model('candidate_model');
$data = $this->candidate_model->fetch_states($postData);
echo json_encode($data);
}
Model
candidates_model
function fetch_states($postData)
{
//$query = $this->db->query("SELECT * FROM states");
//return $query;
$response = array();
// Select record
$this->db->select('id,name');
$this->db->where('country_id', $postData['country']);
$q = $this->db->get('states');
$response = $q->result_array();
$response= json_encode($response);
return $response;
}
Model returns value from database and it is also can be access from the view.
I alert the response and it returns array like {"id":"36","name":"delhi"}.
I need to fill this results to dropdown with id states
Any help? Thanks in advance
Try This,
Model :
function fetch_states($country)
{
$this->db->select('id,name');
$this->db->where('country_id', $country);
$q = $this->db->get('states');
if ($q->num_rows() > 0) {
return $q->result_array();
}else{
return array();
}
}
Controller :
function get_states()
{
$this->load->helper('url');
$postData = $this->input->post();
$this->load->model('candidate_model');
$country = $postData['country'];
$state = $this->candidate_model->fetch_states($country);
$respose_array['state'] = $state;
echo json_encode($response_array);
exit();
}
View ajax code :
$.ajax({
url:'<?php echo base_url()?>main/get_states',
method: 'post',
data: {country: country},
dataType: 'json',
success: function(response){
$.each(JSON.parse(response.state),function(i,item){
$('#state').append('<option value="'+item.id+'">'+item.name+'</option>');
});
}
});
Related
I want to make a dynamic dropdown using selectpicker bootstrap library, codeigniter 4, and AJAX.
I got a problem when I trigger to select the first dropdown, the second dropdown's option appended at third times select. Here I provide the video :
https://youtu.be/AVUBlhajZ_k
Here is my code:
MODEL :
function barangBySupp($namaSupp)
{
$supp = $namaSupp;
$data = $this->db->query("SELECT * FROM tablebarang WHERE supplier='$supp'");
$result = $data->getResultObject();
return $result;
}
CONTROLLER :
public function post()
{
$request = service('request');
if ($request->isAJAX()) {
$namaSupp = $request->getVar('id');
$data = $this->barangMasukModel->barangBySupp($namaSupp);
echo json_encode($data);
}
}
JAVASCRIPT
$("#selectOptSupp").on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue){
const id = $('#selectOptSupp option:selected').data('nama');
const alamat = $('#selectOptSupp option:selected').data('alamat');
const noTelp = $('#selectOptSupp option:selected').data('notelp');
$('[name=namaSupp]').val(id);
$('[name=alamatSupp]').val(alamat);
$('[name=noTelp]').val(noTelp);
$.ajax({
type: "post",
url: "/BarangMasuk/post",
dataType: "JSON",
data: {
id: id
},
cache: false,
success: function(response) {
$.each(response, function(index, data){
$('#selBarang').append('<option data-nama="'+data['namaBarang']+'" data-harga="'+data['harga']+'" data-unit="'+data['unit']+'" value="'+data['namaBarang']+'" data-tokens="'+data['namaBarang']+'">'+data['namaBarang']+'</option>').selectpicker("refresh");
});
SHORT VIEW CODE :
<select id="selectOptSupp" class="form-control selectpicker" data-live-search="true">
<?php foreach ($supplier as $value) : ?>
<option data-nama="<?= $value['namaSupp']; ?>" data-notelp="<?= $value['noTelpSupp']; ?>" data-alamat="<?= $value['alamatSupp']; ?>" data-tokens="<?= $value['namaSupp'] ?>" name="" value="<?= $value['namaSupp'] ?>"><?= $value['namaSupp'] ?>
</option>
<?php endforeach; ?>
</select>
<select id="selBarang" class="form-control selectpicker" data-live-search="true">
// OPTION DATA SHOULD APPEND HERE WHEN #selectOptSupp fires
</select>
How can I insert an Ajax result into an input value?
HTML/PHP
<select id="getcategory" name='categoryname' ><option>SELECT---</option>
<?php
$getcat = mysqli_query($con,"SELECT * FROM category ORDER BY categoryname ASC");
while($rec = mysqli_fetch_assoc($getcat)) { ?>
<option><?php echo $rec['categoryname']; ?></option><?php } ?>
</select><br>
<input class='categoryprefix' type='text' name='subcatprefix' />
Ajax
<script type="text/javascript">
$(document).ready(function(){
$("#getcategory").change(function(){
var cprefix = $(this).val();
$.ajax({
url: 'getCategory.php',
type: 'post',
data: {categoryname: cprefix},
success: function(data) {
$(".categoryprefix").append(data);
}
});
});
});
</script>
Note:
File getCategory.php is good
I'm trying to receive post data with php from ajax in same page but seems like i have some issues that i have no idea to solve them
here is my html/php code :
<select style="width:auto; margin-left:6%;" class="form-control" name="n-omran-select" id="num_omrane">
<option value='' >Choisir...</option>
<?php
while ($row = $result->fetch_assoc())
{
echo "<option value=".$row['N_omran'].">".$row['N_omran']."</option>";
}
?>
</select><br>
<?php
if (isset($_POST["selectName"])) { // try to receive post values but it seems that's not working
$selectOption = $_POST["selectName"];
$query = "SELECT nom,prenom,tel,adress,matricule_assu FROM `personnel` WHERE N_omran ='$selectOption'";
$result = mysqli_query($db,$query);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if ($row) {
echo " <h4>Nom : {$row['nom']}</h4>
<h4>Prénom : {$row['prenom']}</h4>
<h4>Téléphone : {$row['tel']} </h4>
<h4>Maticule d'assurance : {$row['matricule_assu']}</h4>
<h4>Adresse : {$row['adress']}</h4>";
}
} ?>
And here is my Ajax post request :
$('#num_omrane').on('change', function () {
var n_omrane = $('#num_omrane').val();
if(n_omrane != ''){
$.ajax({
type: "POST",
url: "index.php",
data: {selectName: n_omrane},
success: function () {
alert("Post request successfully done")
}
});
}
});
the code below can replace all your data with the new ones with clean writing :)
// get data from Database
<?php
if (isset($_POST["selectName"])) { // try to receive post values but it seems that's not working
$selectOption = $_POST["selectName"];
$query = "SELECT nom,prenom,tel,adress,matricule_assu FROM `personnel` WHERE N_omran ='$selectOption'";
$result = mysqli_query($db,$query);
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
} ?>
// show rows to be selected
<select style="width:auto; margin-left:6%;" class="form-control" name="n-omran-select" id="num_omrane">
<option value='' >Choisir...</option>
<?php while ($row = $result->fetch_assoc()) { ?>
<option value="<?= $row['N_omran'] ?>"> <?= $row['N_omran'] ?></option>
<?php } ?>
</select><br>
// show recieved data
<?php if ($row) { ?>
<div id="informations">
<h4>Nom : <span id="nom"><?= $row['nom'] ?></span></h4>
<h4>Prénom : <span id="prenom"><?= $row['prenom'] ?></span></h4>
<h4>Téléphone : <span id="tel"><?= $row['tel'] ?> </span></h4>
<h4>Maticule d'assurance : <span id="matricule_assu"><?= $row['matricule_assu'] ?></span></h4>
<h4>Adresse : <span id="adress"><?= $row['adress'] ?></span></h4>
</div>
<?php } ?>
// script for making ajax call
<script>
$('#num_omrane').on('change', function () {
var n_omrane = $('#num_omrane').val();
if(n_omrane != ''){
$.ajax({
type: "POST",
url: "index.php",
data: {selectName: n_omrane},
success: function (response) {
$("#nom").text(response.nom);
$("#prenom").text(response.prenom);
$("#tel").text(response.tel);
$("#matricule_assu").text(response.matricule_assu);
$("#adress").text(response.adress);
}
});
}
});
</script>
$json_data=file_get_contents('php://input');
$json=json_decode($json_data,true);
if(array_key_exists("selectName",$json)){
$selectOption =$json["selectName"];
}
I have a database table for my saved template. All are in HTML format and I want to get a specific template using an AJAX.
Here's my code:
HTML part
<div class="form-group">
<label>Select Template: <span class="text-info">(*Optional)</span></label>
<select class="form-control" name="load_template" id="load-template">
<?php if(count($templates) > 0) { ?>
<option value="">-- load template --</option>
<?php foreach($templates as $temp) { ?>
<option value="<?php echo $temp['id']; ?>"><?php echo $temp['template_name']; ?></option>
<?php } ?>
<?php } else { ?>
<option value="">There are no saved templates</option>
<?php } ?>
</select>
</div>
JS part
$('#editor').ckeditor();
$('#load-template').on('change', function(){
var id = $(this).val();
//do some ajax to get content...
console.log(id);
$.ajax({
url: "<?php echo site_url('users/user/getLoadTemplate'); ?>",
data: {template_id: id},
dataType: 'html',
type: 'post',
beforeSend: function() {},
success: function(template) {
$('#editor').html(template);
console.log(template); //ok it shows the HTML but how can I load it in my ckeditor?
},
error: function() {
alert('Unable to load template. Error in AJAX');
}
});
});
PHP side
public function getLoadTemplate() {
$type = $this->input->post('template_id');
$get_template = $this->Users_model->getLoadTemplate($type);
echo $get_template['template'];
}
How can I load my ajax response HTML in the CKEDITOR?
Instead of this
$('#editor').html(template);
Try this
CKEDITOR.instances['editor'].insertHtml(template)
or
CKEDITOR.instances.editor.insertHtml(template)
I'm not much good at jquery and ajax, and I'm now having difficulties on a select box. I use CI and My code is below.
Another select box "category" data will be show according to the "brand". How can I carry data from "brand" and show data in "category" with jquery?
View
<select name="brand" class="form-control" id="brand" required>
<?php
if($items) {
foreach($items as $key) {
?>
<option value="<?php echo $key->brand_id ?>">
<?php echo $key->brand_name ?>
</option>
<?php
}
}
?>
</select>
<select name="category" class="form-control" id="category" required>
</select>
Ajax
<script>
$(function() {
$("#brand").on('change', function() {
var brand = $(this).val();
$.ajax ({
type: "post",
url: "<?php echo base_url(); ?>receiving/showCategory",
dataType: 'json',
data: 'brand='+brand,
success: function(msg) {
var options;
for(var i = 0; i<msg.length; i++) {
options = '<option>'+msg.category[i].category_name+'</option'>;
}
$('#category').html(options);
}
});
});
});
</script>
Controller
function showCategory() {
$brand_id = $this->input->post('brand');
$data['category'] = $this->item_model->category($brand_id);
echo json_encode($data);
}
My category table contains: category_id, category_name, brand_id.
use ajax onchange. .in your view file..
<select name="brand" class="form-control" id="brand" required onchange="brand(this.value,'divid')">
<?php
if($items) {
foreach($items as $key) {
?>
<option value="<?php echo $key->brand_id ?>">
<?php echo $key->brand_name ?>
</option>
<?php
}
}
?>
</select>
<div id="divid">
<select name="category" class="form-control" id="category" required>
<option>Select Category</option>
</select>
</div>
<script>
function brand(id,divid)
{
$.ajax({
type: "POST",
data: "pid="+id,
url: '<?php echo base_url(); ?>receiving/showCategory ?>',
success: function(html){
$('#'+divid).html(html);
}
});
}
</script>
in your function showCategory() :
<div id="divid">
<select name="category" class="form-control" id="category" required>
$brandid = $this->input->post('pid');
//you can pass this brand id to your query and echo the category in option value//
<option>//your result //</option>
</select>
</div>
You need to concat the all values in success function like
options += '<option>'+msg.category[i].category_name+'</option'>;
$('#category').html(options);
Look like your code is correct, but need to change a little bit in ajax request.
You need to parse the data return into parseJson first. The options variable in for loop should concatenate with += code. See example below:
<script>
$(function() {
$("#brand").on('change', function() {
var brand = $(this).val();
$.ajax ({
type: "post",
url: "<?php echo base_url(); ?>receiving/showCategory",
dataType: 'json',
data: 'brand='+brand,
success: function(msg) {
var data = $.parseJSON(msg),options;
for(var i = 0; i<data.length; i++) {
options += '<option>'+data.category[i].category_name+'</option'>;
}
$('#category').html(options);
}
});
});
});
</script>
In case you have a problem with this code, you should change variable in codeigniter part for the variable that hold the results. You can see my working code below as an example :
Js Code
$.ajax({
type : 'POST',
url : '<?php echo base_url();?>controller/function_name',
dateType : 'json',
data : {depart_id : _depart_id.val()},
success : function(data){
var json_data = $.parseJSON(data),
options;
for(var i = 0; i<json_data.length; i++){
options += '<option value="'+json_data[i].destination_id+'">'+json_data[i].location+'</option>';
}
_destination_id.html(options);
}
});
Here is codeigniter code(php)
$destination = $this->custom_model->get_destination_distinct($table,$where);
echo json_encode($destination);