Can You Please Find Out The Problem In The Following Code
I am trying to populate 1 select option based on previous 2 select options.
For example, you will select option 1 and then select option 2 based on those 2 options I will get 3rd option.
Here is my jquery part
/*This Is Basically My Jquery Part Which will Take 2 values from selects*/
$(".asset").change(function(){
var id=$(this).val();
console.log(id);
var dataString1 = 'id='+ encodeURIComponent(id);
console.log(dataString1);
$(".amc").change(function(){
var aid=$(this).val();
console.log(aid);
var dataString2 = 'aid='+ encodeURIComponent(aid);
console.log(dataString2);
//console.log(data);
$.ajax({
type: "POST",
url: "fetch.php",
data : {dataString1: id,dataString2: aid},
cache: false,
success: function(html)
{
$(".scheme").html(html);
}
});
});
});
Here is the fetch part
<?php
include('dbconfig.php');
if($_POST['id'] && $_POST['aid'])
{
$id=$_POST['id'];
$aid=$_POST['aid'];
$stmt = $DB_con->prepare("SELECT * FROM Master_MutualFundMasters WHERE AssetClassID=:id AND AMCID = :aid");
$stmt->execute(array(':id' => $id));
$stmt->execute(array(':aid' => $aid));
?><option selected="selected">Select City :</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['WW_UniqueInvestmentCode']; ?>"><?php echo $row['PrimarySchemeName']; ?></option>
<?php
}
}
?>
When I check my console it is showing me the data but its not passing on next page
You should use select at beginning.
Example:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
since you are asking
In your console it is showing me the data but its not passing on next page means (fetch.php).
then you can do-
$.ajax({
type: "POST",
url: "fetch.php",
data : {"id":dataString1,"aid":dataString2},
cache: false,
success: function(html)
{
$(".scheme").html(html);
}
});
and in fetch.php page.
if($_POST["id"] && $_POST["aid"])
{
$id=$_POST["id"];
$aid=$_POST["aid"];
//write ur code here...
}
I Hope this help u.
Related
I'm using ajax, creating a dependent category and subcategory, everything works, my html is valid, I'm using selectizejs on both category and sub category. the category is working fine, the subcategory isn't. If I don't use selectize, everything works perfectly
$(".category").change(function () {
var id = $(this).val();
var dataString = 'id=' + id;
$.ajax
({
type: "POST",
url: "subcat.php",
data: dataString,
cache: false,
success: function (html) {
$(".subcat").html(html);
}
});
});
$('#subcat').selectize({
plugins: ['remove_button'],
persist: false,
});
index.php
<label class="control-label col-md-3 col-3">Sub Category <span class="required">*</span>
<select name="post[subcategory]" class="subcat" id="subcat">
<option selected="selected" value="">Select Sub Category</option>
</select> </label>
subcat.php
foreach ($children as $child) {?>
<option value="<?php echo $child->id; ?>"><?php echo $child->name; ?></option>
<? } ?>
No errors in console. When you select a category then all the sub categories gets displayed in the browser as static text without the possibility of selecting an option.
Again, if I remove selectize, I get a perfectly normal dropdown.
I want to populate a dropdown (AJAX) when I click on the dropdown.
I have a dropdown categories and a button Add categories
When I open the page the first time, I can see my categories inside the dropdown.
If I want to include another categories, I click on Add categories and I insert my new categories.
After, if I click on the dropdown, I must see my new categories.
How to do that ?
I don't know exactly how to create that.
Thank you
my_ajax_file.php
$Qcheck = $OSCOM_Db->prepare('select categories_id as id,
categories_name as name
from :table_categories');
$Qcheck->execute();
$list = $Qcheck->rowCount();
if ($list > 0) {
$array = [];
while ($value = $Qcheck->fetch() ) {
$array[] = $value;
}
# JSON-encode the response
$json_response = json_encode($array); //Return the JSON Array
# Return the response
echo $json_response;
HTML code
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
}
});
});
}
</script>
<select name="category_id" id="Mycategory_id" class="form-control">
<option value="0" selected="selected">Haut</option>
<option value="23">Panneaux Signalétique</option>
<option value="20">Signalétique Camping</option>
<option value="22"> Barrières</option>
<option value="21"> Entrée</option>
</select>
<input type="hidden" name="current_category_id" value="0" /></div>
You need to update the select element with new options.
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
var options_html = '';
for(index in data){
var category_id = data[index]['categories_id'];
var category_name = data[index]['categories_name'];
options_html += '<option value="'+category_id+'">' + category_name + '</option>';
}
$('#category_id').html(options_html);
}
});
)};
</script>
To make rendering easy, you can use mustache.js
I have this dependent dropdown function where I have a dropdown and another one depending on it,
here is the HTML
<select class="form-control" name = "PROV_ID" id = "PROV_ID">
<option></option>
<?php foreach ($content2 as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID' id = 'CT_ID'>
<option value=""></option>
</select>
and here is the javascript
jQuery(document).ready(function(){
$("#PROV_ID").change(function() {
var PROVID = {"PROVID" : $('#PROV_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID,
url: "<?php base_url(); ?>Employees/dependent_dropdown/",
success: function(data){
var select = $('#CT_ID');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>");
});
}
});
});
});
now I want to have one like this, but I wanted to have selected values for the first two dropdowns before the dependent one shows the values.
e.g.
first dropdown -->select a value
second dropdown -->selects a value
dependent dropdown --> gives values according to first and second dropdown.
example: select * from thistable where column1 = 'firstdropdownvalue' and column2 = 'seconddropdownvalue'
then the dropdown values would be the result.
jQuery(document).ready(function(){
$("#CT_ID").change(function() {
var PROVID_two = {"PROVID" : $('#PROV_ID').val(), "CT_ID" : $('#CT_ID').val()};
console.log(PROVID);
$.ajax({
type: "POST",
data: PROVID_two,
url: "<?php base_url(); ?>Employees/dependent_dropdown2/",
success: function(data){
var select = $('#PROVID_two');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.CT_IDnew+"'>"+option.CITYnew+"</option>");
});
}
});
});
});
You can try like this. Pass two selected values. Hope you understood
I want to make step input with select option, in this case, i make 3 step, when select first option then will show next option 2, then option 3. i am using ajax and i set $config['csrf_protection'] = TRUE; in Codeigniter config file. In first select option (#kategori) is work and show next value in second select option, but in step 3 select option (#sub1 or secon function of javascript) n't work. thank before.
This is my view:
<?php echo form_open_multipart('',array('class'=>'form-horizontal'));?>
<?php echo form_label('Kategori','id_kategori',array('class'=>'col-sm-2 control-label'));?>
<select id="kategori" name="id_kategori">
<option value=""></option>
<?php
foreach($kategori as $kategori_umum)
{
echo '<option value='.$kategori_umum->id.'>'.$kategori_umum->nama_kategori.'</option>';
}
?>
</select>
<select id="sub1" name="id_kategori_sub1"> //step 2
<option value=""></option>
</select>
<select id="sub2" name="id_kategori_sub2"> //step 3
<option value=""></option>
</select>
Ajax :
<script type="text/javascript">
$('#kategori').change(function(){
var kategori_id = $('#kategori').val();
//alert(state_id);
if (kategori_id != ""){
var post_url = "<?php echo base_url();?>masuk/produk/get_sub1";
$.ajax({
type: "POST",
url: post_url,
data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>','kategori_id':kategori_id},
dataType: 'json',
success: function(kategori_sub1, dataType) //calling the response json array 'kategori_sub1'
{
$('#sub1').empty();
$('#sub1').show();
$.each(kategori_sub1,function(id,sub1)
{
var opt = $('<option />'); // creating a new select option for each group
opt.val(id);
opt.text(sub1);
$('#sub1').append(opt);
$('#sub2').hide();
});
},
error:function(xhr)
{
alert("Terjadi Kesalahan");
}
}); //end AJAX
} else {
$('#sub1').empty();
$('#sub2').empty();
}});
$('#sub1').mouseout(function(){
var sub1_id = $('#sub1').val();
if (sub1_id != ""){
var post_url = "<?php echo base_url();?>masuk/produk/get_sub2";
$.ajax({
type: "POST",
url: post_url,
data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>','sub1_id':sub1_id},
dataType: 'json',
success: function(kategori_sub2, dataType)
{
$('#sub2').empty();
$('#sub2').show();
$.each(kategori_sub2,function(id,sub2)
{
var opt = $('<option />');
opt.val(id);
opt.text(sub2);
$('#sub2').append(opt);
});
},
error:function(xhr)
{
alert("Kesalahan");
}
}); //end AJAX
}});</script>
I suspect your problem is using wrong event mouseout.
You should be using change the same way the first one that works does.
Beyond that more information is needed about the actual requests by inspecting in browser dev tools
I am currently looking to have a drop down list in my form. I have this drop down which selects the default value:
<p>Price Band:<select id='priceBand' style = 'width:150px' value = 'band1'>
<option value="band7">Reduce by 30c</option>
<option value="band6">Reduce by 25c</option>
<option value="band5">Reduce by 20c</option>
<option value="band4">Reduce by 15c</option>
<option value="band3">Reduce by 10c</option>
<option value="band2">Reduce by 5c</option>
<option value="band1" selected="selected">default</option>
</select></p>
Which works fine and selects the default as the default value. But what I also need to be able to do - after the form is submitted I want it to keep the last selected value as the default one. It is a form used to add sales with different price bands. The sales are entered by the price bands so the defaults are entered first, the band2, band3 and so on.. What is the best way of doing it? I am currently using javascript and php on the page if that makes it any easier?
Ajax code. I didn't include getting the value of the dropdown as this is only a new thing that I am implementing. I just want to know if it is possible to have a default value selected when the form is loaded first and then when a different value is selected, to keep that value as the new default:
$('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' :
[ { text: "Ok", click: function() {
var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';
var productCode = $('#ProductCode').val();
var qty = $('#Quantity').val();
var dialog = this;
$.ajax({
url: url,
dataType: 'json',
data: {'productCode' : productCode, 'qty' : qty},
type: 'post',
timeout: 5000,
success: function(json) {
if (json.status == 'S'){
alert('Sale added');
}
else if (json.status == 'E')
alert('No product with given PLU was found! Please check!');
// loadDepartments();
$( dialog ).dialog( "close" );
},
error: function() {}
});
} } ] });
You can use localStorage for that purpose:
$('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' :
[ { text: "Ok", click: function() {
var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';
var productCode = $('#ProductCode').val(),
qty = $('#Quantity').val(),
dialog = this;
// save current selected value in storage
localStorage.setItem("default_option", productCode);
$.ajax({
url: url,
dataType: 'json',
data: {'productCode' : productCode, 'qty' : qty},
type: 'post',
timeout: 5000,
success: function(json) {
if (json.status == 'S'){
alert('Sale added');
}
else if (json.status == 'E')
alert('No product with given PLU was found! Please check!');
// loadDepartments();
$( dialog ).dialog( "close" );
},
error: function() {}
});
} } ] });
// after page reload
if (localStorage.getItem("default_option")) {
$('#ProductCode').val(localStorage.getItem("default_option"));
}
This might do it - either selected = "selected" or just selected depending on whether you will use XHTML or not. It requires making the value a simple integer, but that simplifies cleaning it up by allowing you just to use its intval() which you would use in your query as well as to control the selected option. This version assumed page submission which apparently is not the case here now as it is all done by Ajax but hope it will be useful to someone.
if(!isset($priceBand_value)) $priceBand_value = array();
$priceBand_value = ''; // reset it if already used
// set default 'selected = "selected"'; or just 'selected';
<?php if(!isset($_POST['priceBand']) $priceBand_value[1] = 'selected = "selected"'; ?>
<?php $priceBand_value[intval($_POST['priceBand'])] = 'selected = "selected"'; ?>
<p>Price Band:<select id='priceBand' style = 'width:150px'>
<option value="7" <?php echo $priceBand_value[7] ?>>Reduce by 30c</option>
<option value="6" <?php echo $priceBand_value[6] ?>>Reduce by 25c</option>
<option value="5" <?php echo $priceBand_value[5] ?>>Reduce by 20c</option>
<option value="4" <?php echo $priceBand_value[4] ?>>Reduce by 15c</option>
<option value="3" <?php echo $priceBand_value[3] ?>>Reduce by 10c</option>
<option value="2" <?php echo $priceBand_value[2] ?>>Reduce by 5c</option>
<option value="1" <?php echo $priceBand_value[1] ?>>default</option>
</select></p>
You could start from 0 rather than 1 for most cases but this was intended primarily to fit the code framework given. This would avoid the need to set the default as intval($_POST['priceBand']) would be 0 when the page is first rendered but in this case it could be harder to keep track of the "bands".