I have two selects, the second one is hidden and it should be shown if the first select has been changed, I checked it through on('change', function(){ ... and it is working so far. I've checked and also showed a console.log when the first select box is changed.
The main problem here is when I picked a option from the first select box, it should send some request using AJAX. I've sent some request to fetch_sections.php and it should append or add data in my second select box.
This is my updated script:
<script>
$(document).ready(function() {
$('select').material_select();
$('#school-list').on('change', function() {
$.ajax({
url: 'fetch_sections.php',
type: 'post',
dataType: 'html',
data: {parent: $(this).val() },
success: function(data)
{
$('#section-list').empty();
$('#section-list').html(data);
console.log(data);
}
});
$('#hideThis').show("slow");
});
});
</script>
This is my fetch_sections.php (working, checked with PostMan):
<?php
require '../assets/php/init.php';
if ($_POST)
{
$schoolID = Essentials::sanitize($_POST['parent']);
$fetchSQL = "SELECT `sectionid`, `name` FROM `sections` WHERE schoolid = ?";
$fetch = $conn->prepare($fetchSQL);
$fetch->execute([$schoolID]);
$fetchRes = $fetch->fetchAll(PDO::FETCH_ASSOC);
if(!$fetchRes) {
echo '
<option value="" disabled selected>Unfortunately, there is no section here.</option>
';
} else {
foreach ($fetchRes as $section)
{
echo '
<option value="'.$section['sectionid'].'"">'.$section['name'].'</option>
';
}
}
}
This is my select HTML also updated:
<div class="row margin">
<div class="input-field col s12">
<select id="school-list" name="school-list">
<option value="" disabled selected>Choose your school</option>
...
</select>
<label>School</label>
</div>
</div>
<div class="row margin" id="hideThis" style="display:none">
<div class="input-field col s12">
<select id="section-list" name="section-list">
<option value="" disabled selected>Choose your section</option>
</select>
<label>Section</label>
</div>
</div>
Update [as suggested by ccKep]:
I can now see the data that I want through console.log(data), the thing that it outputs is:
<option value="9-1">9-A...</option>, now I want to add it to my main select list but it doesn't let me.
The output should be:
<select id="section-list" name="section-list">
<option value="" disabled selected>Choose your section</option>
<option value="9-1">9-A...</option>
</select>
Related
i have an appended, there a selectbox with 2 textbox
first the selectbox will selecting an item, after on change, it will set all the textbox with data based on selected.
my select option calling data from database array $data.
this is my ajax code
function getBarang(val) {
$.ajax({
url: baseurl + "JSON/getBarang",
// url: baseurl + "JSON/getVal" + val,
type:"POST",
data:{"get_barang":val},
dataType:"JSON",
success:function(data){
$('#harga_jual').val((data[0].harga_jual));
$('#stock_sisa').val((data[0].stock_sisa));
}
});
}
this is my form
echo '<select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value)">';
echo (isset($dBarang->id_barang)) ? '<option value="' . $dBarang->id_barang.'">' . $dBarang->nama_barang . '</option>' : '';
echo ' </select> ';
echo '
<input type="text" class="form-control" name="stock_sisa" id="stock_sisa">
<input type="text" class="form-control" name="harga_jual" id="harga_jual">
lets pass about query data, because its worked.
and this is my view as result
my second textbox not working, pls help me, thanks
Edited:
Let me explain more.
the target is textbox stock sisa, and textbox harga_jual
the $dBarang created like this, $row just like $i=0, for cheching last data on database
$dataBarang = $this->m_db->getDataWhere("v_pembelian_detail","id_pembelian","'$id_p' ORDER BY id_pembelian_detail");
$dataBarang = (empty($dataBarang)) ? [''] : $dataBarang;
foreach ($dataBarang as $dBarang)
{
You can pass this as well inside your function where this refer to current select-box where change has been taken place. Then , using this you can use $(el).closest('.outer').find('.harga_jual').. to add input values to required inputs only.
Demo Code :
//just for demo..
var data = [{
"harga_jual": "soemthing",
"stock_sisa": "soemthing1"
}]
function getBarang(val, el) {
/*$.ajax({
url: baseurl + "JSON/getBarang",
// url: baseurl + "JSON/getVal" + val,
type: "POST",
data: {
"get_barang": val
},
dataType: "JSON",
success: function(data) {*/
//get closest div > get input add value there..
$(el).closest('.outer').find('.harga_jual').val(data[0].harga_jual);
$(el).closest('.outer').find('.stock_sisa').val(data[0].stock_sisa);
/* }
});*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--add sme outer div-->
<div class="outer">
<select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control stock_sisa" name="stock_sisa">
<input type="text" class="form-control harga_jual" name="harga_jual">
</div>
<div class="outer">
<select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control stock_sisa" name="stock_sisa">
<input type="text" class="form-control harga_jual" name="harga_jual">
</div>
<div class="outer">
<select name="barang[]" id="barang-'.$row.'" class="s2barang form-control" onchange="getBarang(this.value ,this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control stock_sisa" name="stock_sisa">
<input type="text" class="form-control harga_jual" name="harga_jual">
</div>
this is what i get from changing my id to class
function getBarang(val) {
$.ajax({
url: baseurl + "JSON/getBarang",
// url: baseurl + "JSON/getVal" + val,
type:"POST",
data:{"get_barang":val},
dataType:"JSON",
success:function(data){
$('.harga_jual').val((data[0].harga_jual));//before #harga_jual
$('.stock_sisa').val((data[0].stock_sisa));//before #stock_sisa
}
});
}
but the data seem the last selected and change to all :(
i want it each selected
i have two select option list with values retrieved from db .
<select id="userid" onchange="selSuj()">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
<script>
function selSuj(){
var x = $('#userid').val();
$.ajax({
type:'POST',
url:'same page url',
data:{
'userid':x
},
success: function(result){
document.getElementById("determineSubj").innerHTML = result;
}
})
;
}
the first select option(userid),when option selected, should populate the corresponding values in the second select option(subject), using the user option value(eg 1,2,3) as search p.key to the subject db.
I have tried using ajax, it worked out well on alert(result), but does not update the second select option values. please help.
A select should not contain a <div>.
As we can see from this brief demo, doing so makes the div inaccessible to JavaScript, because it doesn't consider it to be a valid part of the DOM:
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("determineSubj"));
});
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
In any case, even if it was valid, it's entirely unnecessary for your purpose. You can just update the HTML of the select element directly.
Change the HTML to:
<select id="subject">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
And the "success" callback to:
success: function(result) {
document.getElementById("subject").innerHTML = result;
}
and there shouldn't be any problem.
I have this problem ... I want to make the show hide some dropdowns with ajax, I don't know where to place the show hide code ... it only shows the first country, after selecting the country will appear and choose the city state to appear. ... can you help me fix this code?
this is my code and script
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value disabled selected>Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select State</option>
</select>
</div>
<div class="row">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
</select>
</div>
</div>
function
getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data: 'country_id=' + val,
success: function(data) {
$("#state-list").html(data);
getCity();
}
});
}
function
getCity(val) {
$.ajax({
type: "POST",
url: "getCity.php",
data: 'state_id=' + val,
success: function(data) {
$("#city-list").html(data);
}
});
}
You can use .prop for that. You can refer here.
You must start your script with $(document).ready(function()) so that JS will know if the page is loaded and ready.
Then consider this logic here. (Example code)
if($("#country-list option:selected").index() == 0){
$("#state-list").prop("hidden", true);
}else{
$("#state-list").prop("hidden", false);
}
The code above actually checks if the country-list items is not selected when the page loaded, the other dropdown will consider it as hidden, or else it is shown.
Add a hidden class to state and city drop-downs in HTML to hide them from initial state.
Display the state drop-down when country is selected.
If 'Select' option is selected/ value is cleared, then add the hidden class to the cascading drop-downs
var
stateContainer = $('.state-container'),
cityContainer = $('.city-container'),
countryList = $('#country-list'),
stateList = $('#state-list'),
cityList = $('#city-list');
countryList.on('change', function() {
if (this.value === '') {
stateContainer.addClass('hidden');
cityContainer.addClass('hidden');
stateList.val('');
cityList.val('');
} else {
stateContainer.removeClass('hidden');
//getState(this.value);
}
});
stateList.on('change', function() {
if (this.value === '') {
cityContainer.addClass('hidden');
cityList.val('');
} else {
cityContainer.removeClass('hidden');
//getCity(this.value);
}
});
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" >
<option value="" selected>Select Country</option>
<option value="A">Country A</option>
</select>
</div>
<div class="row state-container hidden">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" >
<option value="">Select State</option>
<option value="A">State A</option>
</select>
</div>
<div class="row city-container hidden">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
<option value="A">City A</option>
</select>
</div>
</div>
I have a dropdown list with 5 options, whenever I click the submit button in the modal, the value posted to the controller is not the one I had selected.
Here is my view code
<div class="form-group">
<div class="col-md-4">
<select class="form-control" name="procode" id="procode" >
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="AOC">APS</option>
<option value="ATN">ADS</option>
<option value="AOC">ATW</option>
<option value="ATN">ATB</option>
</select>
</div>
</div>
And my ajax code for submiting the data to controller is here
var url;
url = "<?php echo site_url('person/ajax_add_claim')?>";
$.ajax({
url : url,
type: "POST",
data: $('#formclaim').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status)
{
$('#modal_form').modal('hide');
$('#modal_form').removeData();
reload_table();
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error');
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]);
}
}
$('#btnSave').text('save');
$('#btnSave').attr('disabled',false);
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#btnSave').text('save');
$('#btnSave').attr('disabled',false);
}
});
This is a silly question to answer. But here you go:
<div class="form-group">
<div class="col-md-4">
<select class="form-control" name="procode" id="procode" >
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="APS">APS</option>
<option value="ADS">ADS</option>
<option value="ATW">ATW</option>
<option value="ATB">ATB</option>
</select>
</div>
</div>
Do you notice the difference?
The option in your dropdown contains similar values, that might be the cause of the problem.
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="AOC">APS</option>
<option value="ATN">ADS</option>
<option value="AOC">ATW</option>
<option value="ATN">ATB</option>
Try replacing the values with some other data. Just to test, whether the code is working or not.
Show us a bit of controller code to see what and how you are displaying the dropdown data.
Can you please share your controller function and reload_table function of Javascript. i think you are not returning accurate data from Controller function. You should use like this.
$drop_downdata = $this->db->function(your db query);
/* you pass this data to view like this create a page with this name dropdown_page.php */
$dropdown_view['page'] = $this->load->view('dropdown_page',array('data'=>$drop_downdata),TRUE);
$this->output->set_content_type('application/json')->set_output(json_encode($dropdown_view));
View Page dropdown_page.php
<?php foreach($data as $value): ?>
<li><?=$value->column_name?></li>
<?php endforeach; ?>
you will simple get this Drop down in this way
`$("#dropdown_id or class").html(response.page)`.
It will show your dropdown according to your request
I was trying to search data from database using multiple select tags on onchange select tags, I have four select tags with multiple select option. here is form
<form method="GET" id="first_form" >
<div class="col-md-3">
<div class="form-group">
<label>Maintenance</label>
<select id="chkveg" name="maintenance[]" multiple="multiple">
<option value="21">Low</option>
<option value="23">Medium</option>
</select>
</div>
<input type="hidden" id="btnget" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Lighting </label>
<select id="chkveg1" name="lighting[]" multiple="multiple">
<option value="24">indoors: iow light</option>
<option value="25">indoors: medium light</option>
</select>
</div>
<input type="hidden" id="btnget1" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Shade </label><br/>
<select id="chkveg2" name="shade[]" multiple="multiple">
<option value="30">Low</option>
<option value="31">Medium</option>
</select>
</div>
<input type="hidden" id="btnget2" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Other</label><br/>
<select id="chkveg3" name="other[]" multiple="multiple">
<option value="40">Low</option>
<option value="41">Medium</option>
</select>
</div>
</div>
</form>
<div class="col-md-3" id="form-content">
</div>
and my database table structure is
search criteria is "If I select multiple options from one select tag, It should search using OR operator and If i select a option from second select tag, It should search using AND operator."
For example : In above form,If i select two option from maintenance tag, search using OR operator with one pl_maintenance_search column, If i select one option from lighting select tag, search using AND between pl_maintenance_search and pl_lighting_search. and same with other select tags.
I am submitting this form using this script
$("form select").on('change', function () {
var dataString = $("#chkveg, #chkveg1, #chkveg2, #chkveg3").serialize();
$.ajax({
url: 'ajax_file.php',
type: 'GET',
data: dataString,
dataType: 'html'
})
.done(function(data){
$('#form-content').html(data);
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
and here is my ajax_file.php code
$operator='OR';
$all_array = $_GET;
$unque_array = array();
$count=0;
foreach ($all_array as $main_key => $value )
{
if($main_key)
{
$count++;
}
if($count>1){ $operator='AND'; }
foreach ($value as $r_value)
{
$single = $r_value;
$query = "SELECT * FROM tbl_pl_details WHERE pl_maintenance_search LIKE ? $operator pl_lighting_search LIKE ? $operator pl_shade_search LIKE ? $operator pl_other_search LIKE ? ";
$params = array("%$single%", "%$single%", "%$single%", "%$single%" );
$select_maint_plants = $con->prepare($query);
$select_maint_plants->execute($params);
while($fetch_light_plants = $select_maint_plants->fetch(PDO::FETCH_ASSOC))
{
if(!in_array($fetch_light_plants['id'], $unque_array))
{
echo $fetch_light_plants['pl_name']; echo '<br/>';
}
$unque_array[]= $fetch_light_plants['id'];
}//End while loop
}//End foreach loop
}//End foreach loop
Above code is working with only single select tag, and not with others tag.
Please help me to solve this.