I have some locations that are stored in my database separated by a comma and I have a dropdown that gets that information. The user selects a location to populate another drop down based on this chosen location.
Here is my php code:
<label for="select-service">
<strong>Enter a Location:</strong>
</label>
<select class="form-control" id="select-location" class="col-xs-12 col-sm-4 form-control" required>
<option value="">Select Location</option>
<?php
foreach($appointment_locations as $location) {
?>
<option value="<?php echo $location->notes ?>"><?php echo $location->notes ?></option>
<?php
}
?>
</select>
Here is my javascript code:
$(document).ready(function() {
FrontendBook.initialize(true, GlobalVariables.manageMode);
GeneralFunctions.enableLanguageSelection($('#select-language'));
$('#select-provider').html('');
$('#select-location').change(function() {
$('#select-provider').html('');
var selected_location = $(this).val();
$.ajax({
url: '<?php echo site_url('appointments/getProviderByLocation'); ?>',
type: 'POST',
data: {
csrfToken: GlobalVariables.csrfToken,
'selected_location': selected_location,
},
dataType: 'json',
success: function(data) {
var options = '';
$.each(data, function(key,val) {
console.log(val.id);
options += '<option value="'+val.id+'">'+val.first_name+" " +val.last_name +'</option>'
});
$('#select-provider').html(options);
}
});
});
and here is a screenshot of the location how it is currently:
So what i want to achieve is to have Randburg as one option, Greenside as another option and Rosebank as another option.
You have different type string in your array so for this particular problem in your loop you should explode your string like this and another loop to print separated string
<select class="form-control" id="select-location" class="col-xs-12 col-sm-4 form-control" required>
<option value="">Select Location</option>
<?php
foreach($appointment_locations as $location) {
$LocationsArray = explode(",", $location->notes);
foreach($LocationsArray as $singleLocation):
?>
<option value="<?=$singleLocation ?>"><?=$singleLocation ?></option>
<? endforeach;
};?>
Related
i have a codeigniter website, where there is a form for user to select category and subcategory, when a user selects category the subcategory dropdown should show accordingly, i did the following code:
public function subcategories() {
$category = $this->input->post('category');
$query = $this->db->query('SELECT name FROM subcategory WHERE parentcategory='.$category);
$data['subcategories'] = $query->result_array();
$this->load->view('homecontroller/subcategories', $data);
echo $category;
}
in subcategories.php
<?php foreach ($subcategories as $c): ?>
<option value="<?php echo $c['name'] ?>"><?php echo $c['name'] ?></option>
<?php endforeach; ?>
and in my view:
$(document).ready(function() {
$('#sl_countries').change(function() {
$('#sl_cities').load("<?php echo site_url('index.php/homecontroller/subcategories') ?>", {
category: $(this).val()
});
});
});
<div class="form-group col-md-6">
<label for="inputEmail4">Product Category</label>
<select id="sl_countries" class="form-control" name="cname" aria-label="Default select example">
<?php
foreach($listcategory as $val){
echo '<option value="'.$val->name.'">'.$val->name.'</option>';
}?>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Sub Category</label>
<select class="form-control" name="sname" id="sl_cities"></select>
</div>
however this is not working, i get an error like below when i checked the console:
You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1
SELECT name FROM subcategory WHERE parentcategory=
can anyone please tell me what is wrong here, thanks in advance
use this way:-
jQuery Ajax code :-
<script>
$(document).ready(function(){
$('#country').change(function(){
var country_id = $('#country').val();
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>dynamic_dependent/fetch_state",
method:"POST",
data:{country_id:country_id},
success:function(data)
{
$('#state').html(data);
$('#city').html('<option value="">Select City</option>');
}
});
}
else
{
$('#state').html('<option value="">Select State</option>');
$('#city').html('<option value="">Select City</option>');
}
});
});
</script>
Controller Code :-
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dynamic_dependent extends CI_Controller {
function fetch_state()
{
if($this->input->post('country_id'))
{
echo $this->dynamic_dependent_model->fetch_state($this->input->post('country_id'));
}
}
}
?>
Model Code :-
<?php
class Dynamic_dependent_model extends CI_Model
{
function fetch_state($country_id)
{
$this->db->where('country_id', $country_id);
$this->db->order_by('state_name', 'ASC');
$query = $this->db->get('state');
$output = '<option value="">Select State</option>';
foreach($query->result() as $row)
{
$output .= '<option value="'.$row->state_id.'">'.$row->state_name.'</option>';
}
return $output;
}
}
?>
View Code :-
<div class="form-group">
<select name="country" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row->country_id.'">'.$row->country_name.'</option>';
}
?>
</select>
</div>
<br />
<div class="form-group">
<select name="state" id="state" class="form-control input-lg">
<option value="">Select State</option>
</select>
</div>
I want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code i want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code
<select class="form-control" id="region_country_id" name="region_country_id" >
<?php foreach ($countries as $key => $value) { ?>
<option value="<?php echo $value->id; ?>"<?php if($product->region_country_id == $value->id){ echo "selected";} ?>>
<?php echo $value->name;?>
</option>
<?php } ?>
</select>
<select class="form-control" id="region_id" name="region_id" style="margin-top: 10px;" >
<?php if(Session::get('branch_access') != 1)
{?>
<option value="">All region</option>
<?php } ?>
<?php foreach ($regions as $key => $value) { ?>
<option value="<?php echo $value->id; ?>" <?php if($value->id == $product->region_id) { echo "selected";} ?>><?php echo $value->region; ?>
</option>
<?php } ?>
</select>
below is script for above
$('body').on('change', '#region_country_id', function() {
loadOptionRegion($(this).val());
});
function loadOptionRegion(countryID) {
$.ajax({
method: "POST",
url: "/region/country",
dataType: 'json',
data: {
'country_id': countryID
},
beforeSend: function() {},
success: function(data) {
console.log(data.data.region);
var regionList = data.data.region;
var str = '<option value="0">All Region</option>';
$.each(regionList, function(index, value) {
str = str + "<option value='" + value.id + "'>" + value.region + "</option>";
console.log(str);
});
$("#region_id").html(str);
}
})
}
Very first add the multiple in the select box
<select class="form-control" id="region_country_id" name="region_country_id" multiple>
Now in your controller change the query from where to whereIn country ID
From:
->where('country_id',$countryId);
To:
->whereIn('country_id',$arrOfCountryID);
I am working on a registration page where a user when selects its designation, its corresponding reporting head gets selected in "reporting head" field dynamically. I have used Ajax for this but somehow the reporting head field remains empty. Can I get some insights over this?? It will be highly appreciated.
Here goes my registration fields,
<select name="designation" class="form-control" required="" id="desig" >
<option selected="selected" >Select your option</option>
<?php
$sql = mysql_query("SELECT id, designation FROM tbl_designation where id in (1,2,3,4)");
while ($row = mysql_fetch_assoc($sql)){
echo "<option value=" . $row['id'] . ">" . $row['designation'] . "</option>";
}
?></select>
<select name="reporting_head" class="form-control" required="" id="rephead">
<option selected="selected">Select your option</option>
</select>
Now JavaScript+AJAX that I am applying,
$(document).ready(function()
{
$("#desig").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_rep.php",
data: dataString,
cache: false,
success: function(html)
{
$("#rephead").html(html);
}
});
});
});
And finally my ajax_rep.php
<?php
require("includes/config.php");
require("classes/Database.class.php");
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("SELECT reporting_head_id, reporting_head FROM `tbl_designation` WHERE id='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['reporting_head_id'];
$data=$row['reporting_head'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
This is the HTML I am getting on ajax success,
<div class="row row-offcanvas row-offcanvas-right">
<!--/.col-xs-12.col-sm-9-->
<div class="col-sm-3 col-md-3 sidebar" id="sidebar">
<div id="left_panel" class="clearfix left">
<option value="6">Sales Head</option>
try this in you loop while
$list = '<option selected="selected">Select your option</option>';
while($row=mysql_fetch_array($sql))
{
$id=$row['reporting_head_id'];
$data=$row['reporting_head'];
$list .= '<option value="'.$id.'">'.$data.'</option>';
}
}
echo $list;
And in your ajax success function do this
success: function(html)
{
$("#rephead").html("");
$("#rephead").append(html);
}
I am using editable select to show drop down list.Depend on search if values is not present in table which initially generates dropdown then I check if values are present in other table and if yes then I want to reload drop down with new values.
Select in view is
<select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
<option value=""></option>
<?php if(!empty($port_list))
{
foreach($port_list as $d)
{
?>
<option value="<?php echo $d->port_id; ?>"><?php echo $d->port_name; ?></option>
<?php } } ?>
</select>
and ajax is
var search_val = $("#port_of_loading").val();
$.ajax({
type:'POST',
cache:false,
async:false,
data: { 'search_val' : search_val },
url: 'URL',
success: function(data)
{
$("#port_of_loading").html(data);
}
});
I am refreshing it from controller.
consloe.log(data) output is
<select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
<option value=""></option>
<option value="26">value1</option>
<option value="9">value2</option>
</select>
I need to refresh the page and also populate the second drop down according to the value selected in the first drop down.
In PHP I select the drop down value. It calls Javascript function reloadproject() and reloads the page with the current value.
Then I get the value of project id using $_GET.
After reloading I need to call the function getblock(val) using the project id I got using $_GET and populate the second drop down I have.
function reloadproject(val) {
window.location = 'market?id=' + val;
}
function getblock(val) {
$.ajax({
type: "POST",
url: "list_flat_view_dd.php",
data: 'project_id=' + val,
success: function(data) {
$("#block-list").html(data);
}
});
}
function getflat(val) {
$.ajax({
type: "POST",
url: "list_flat_view_dd.php",
data: 'block_id=' + val,
success: function(data) {
$("#flat-list").html(data);
}
});
}
<div class="col-sm-3">
<select name="project" style="width: 100%;" id="project-list" class="form-control select2"
onChange="reloadproject(this.value);">
<option value="all">Select</option>
<?php while ( $project=m ysqli_fetch_array ( $results_project ) ) { ?>
<option value="<?php echo $project[" id "]; ?>"<?php if(isset($_GET[ 'id'])){if($project[ "id"]==$ filter_project_id){ ?>selected="selected"
<?php }} ?>>
<?php echo $project[ "name"]; ?>
</option>
<?php } ?>
</select>
<?php if(isset($_GET[ 'id'])){ ?>
<input type="hidden" name="filter_project_id" id="filter_project_id" value="<?php echo $filter_project_id; ?>">
<?php } ?>
</div>
<div class="col-sm-3">
<select name="block" style="width: 100%;" id="block-list" class="form-control select2" onChange="getflat(this.value);">
<option value="all">Select</option>
</select>
</div>
<div class="col-sm-3">
<select name="flat" style="width: 100%;" id="flat-list" class="form-control select2" onChange="">
<option value="all">Select</option>
</select>
</div>
Have you tried to use 'document ready' to call your 'getblock' function?:
PHP runs first: print the code in your document, and after that, with jQuery $(document).ready() you know that the document is printed and you already have your hidden input with the GET['id'] value:
<input type="hidden" name="filter_project_id" id="filter_project_id" value="<?php echo $filter_project_id; ?>">
And your script:
$(document).ready(function() {
if ($('#filter_project_id').val().length) {
getblock($('#filter_project_id').val());
}
});
First the dropbox reloads the page and using $_GET to enable another input box having project-id and this calls the ajax and jquery function to populate the second drop box without reloading.
function reloadproject(val){
window.location='market?id='+val;
}
$(function() {
if ($('#filter_project_id').val().length) {
var project_id = $("#filter_project_id").val();
if (project_id) {
$.ajax({
type: "POST",
url: "list_flat_view_dd.php",
data: 'project_id=' + project_id,
success: function(data) {
$("#block-list").html(data);
}
});
}
}
});
<div class="col-sm-3">
<select name="project" style="width: 100%;" id="project-list" class="form-control select2" onChange="reloadproject(this.value);">
<option value="all">Select</option>
<?php while ( $project=m ysqli_fetch_array ( $results_project ) ) { ?>
<option value="<?php echo $project[" id "]; ?>"<?php if(isset($_GET[ 'id'])){if($project[ "id"]==$ filter_project_id){ ?>selected="selected"
<?php }} ?>>
<?php echo $project[ "name"]; ?>
</option>
<?php } ?>
</select>
</div>
<?php if(isset($_GET[ 'id'])){ ?>
<input type="hidden" name="filter_project_id" id="filter_project_id" value="<?php echo $filter_project_id; ?>">
<?php } ?>
<div class="col-sm-3">
<select name="block" style="width: 100%;" id="block-list" class="form-control select2" onChange="getflat(this.value);">
<option value="all">Select</option>
</select>
</div>