I'm new beginner in the php, html, css and working on a projekt(for my self).
I got a form with dependent dropdown box, but i'm not allow to assign multiple classes, because it making conflict with my javascript.
I would like to use the same class to keep my form similar.
What i can do?
if i choose to use multiple classes and then my javascript wouldn't work currecly.
I got to dropdown box called "category" and "task_type" and i would like to use "form-control" class to keep my form similar
in the javascript, i'm not allow to use form-control to times.
source code: https://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/
Category: <select name="category" class="form-control" required>
<option value="0">Select Category</option>
<?php
include('dbconnect.php');
$sql = mysqli_query($DBcon,"SELECT * FROM category");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
} ?>
</select>
<br/><br/>
Task Type:<select name="task_type" class="form-control" required>
<option>Select Task Type</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".form-control").change(function()
{
var category_id=$(this).val();
var post_id = 'id='+ category_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$(".form-control").html(cities);
}
});
});
});
</script>
You can't use the form-control class for this, because you don't want the same action for both dropdowns. Give them IDs to distinguish them, and use the IDs in your selectors.
Category: <select id="category" name="category" class="form-control" required>
<option value="0">Select Category</option>
<?php
include('dbconnect.php');
$sql = mysqli_query($DBcon,"SELECT * FROM category");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
} ?>
</select>
<br/><br/>
Task Type:<select id="task_type" name="task_type" class="form-control" required>
<option>Select Task Type</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#category").change(function()
{
var category_id=$(this).val();
var post_id = 'id='+ category_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$("#task_type").html(cities);
}
});
});
});
</script>
Related
I Dont know whats wrong with this code but when i choose one of it no option value shown
Here my Blade View
<div style="overflow:hidden; float:left; width:250px;">
<select id="division" class="" name="">
<option value="groups">-- Division --</option>
<option value="Male">Male</option>
<option value="Female">Femmaleale</option>
</select><br>
<select id="participant">
<option value="choosetools">-- Choose Participant --</option>
</select>
</div>
here my script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#division').change(function(){
var division = $('#division').val();
$('#participant').html('');
$.ajax({
url:'getParticipant/{id}',
type:'GET',
data:{myID:division},
dataType: "json",
success:function(data)
{
$.each(data, function(key, participant)
{
// alert(city.city_name)
$('#participant').prop('disabled', false).css('background','aliceblue').append('<option value="'+participant.gymnastid+'">'+'participant.FULLNAME'+'</option>');
});
}
});
});
});
</script>
here my route
Route::get('/getParticipant/', 'App\Http\Controllers\ScoreController#getParticipant');
here my controller
public function getParticipant()
{
$getdiv = $_GET['divSelect'];
if ($getdiv == 'Male') {
$res = Magmodel::all();
return Response::json($res);
}else{
$res = Wagmodel::all();
return Response::json($res);
}
}
Can Someone please help me so all data from model Magmodel or Wagmodel showup based on dropdown choose
This function only works for the first selection,for example, if I choose id_rayon = 1 (is the first order of the data in the table), I can choose id_gardu based id_penyulang on id_rayon = 1, but if I choose another id_rayon id_gardu selection does not appear
<div class="w3-half">
<label>Penyulang</label>
<select class="w3-select w3-border" name="id_penyulang" onchange="pilih_penyulang(this.value);">
<option value="" disabled selected>Choose your option</option>
<?php
$id_rayon=$row['id_rayon'];
$vendor=$mysqli->query("SELECT * FROM `penyulang` where id_rayon=$id_rayon");
while($row_vendor=$vendor->fetch_array())
{
?>
<option value="<?php echo $row_vendor['id_penyulang'];?>"><?php echo $row_vendor['nama_penyulang'];?></option>
<?php
}
?>
</select>
/this only displays the first id and doesn't loop even though it is in the php while loop
<script type="text/javascript">
function pilih_penyulang(id_penyulang)
{
$.ajax(
{
url: 'http://localhost/arrester/option_gardu.php',
data : 'id_penyulang='+id_penyulang,
type: "post",
dataType: "html",
timeout: 10000,
success: function(response)
{
$('#dom_gardu').html(response);
}
});
}
</script>
</div>
<div class="w3-half">
<label>Gardu</label>
<select class="w3-select w3-border" name="id_gardu" id="dom_gardu">
<option value="" disabled selected>Choose your option</option>
</select>
</div>
and this is dom_gardu file that will be called by javascript
<?php
require_once('connect.php');
$id_penyulang = $_POST['id_penyulang'];
$query= $mysqli->query('select * from gardu where id_penyulang="'.$id_penyulang.'"');
while($data=$query->fetch_array()){
echo '<option value="'.$data['id_gardu'].'">'.$data['nama_gardu'].'</option>';
}
?>
my webpage view
my table view
i have this functioning dependent drop-down, which is used for address, here is my code,
<select class="form-control" name = "PROV_ID" id = "PROV_ID">
<option></option>
<?php foreach ($content 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="">-- Select Type --</option>
</select>
jquery is
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 what i need is to do another one like this in my form, because i need it for residential and permanent address, i did another one like this
<select class="form-control" name = "PROV_ID2" id = "PROV_ID2">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
<option value="">-- Select Type --</option>
</select>
and the jquery is
jQuery(document).ready(function(){
$("#PROV_ID2").change(function() {
var PROVID2 = {"PROVID2" : $('#PROV_ID2').val()};
console.log(PROVID2);
$.ajax({
type: "POST",
data: PROVID2,
url: "<?php base_url(); ?>Employees/dependent_dropdown",
success: function(data){
var select = $('#CT_ID2');
select.html('');
$.each(data, function(i2, option2){
select.append("<option value='"+option2.CT_ID+"'>"+option2.CITY+"</option>");
});
}
});
});
});
im not that sure with the jquery bec. i am not familiar with it, but i need this one finished asap. what is the error? why is the second dependent drop-down not working? thanks
try this for second dropdown, try for first to same thing
<select class="form-control" name = "PROV_ID2" id = "PROV_ID2" onchange="provchange()">
<option></option>
<?php foreach ($content as $cs) {?>
<option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
<?php } ?>
</select>
<select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
<option value="">-- Select Type --</option>
</select>
jquery js
function provchange(){
var PROV_ID2=$('#PROV_ID2').val();
$.ajax({
url: "<?php echo base_url('Employees/dependent_dropdown/')?>",
type: "post",
data : {
PROV_ID: PROVID2
},
success: function(data){
var json = JSON.parse(data);
//alert(data);
$("#CT_ID2").empty();
$("#CT_ID2").append($('<option></option>').attr('value', '').text(':: SELECT ::'));
ival=0;
for (var i in json) {
$("#CT_ID2").append($('<option></option>').attr('value', json[i].CT_ID).text(json[i].CITY));
}
}
});
}
I Edited
I have a html
<select name="action-grid">
<option selected > Select</option>
<option value="1" >Edit</option>
</select>
<select name="action-grid">
<option selected > Select</option>
<option value="2" >Edit</option>
</select>
<?php $_product = $this->getProductBy($values);?>
<div><?php echo $_product->getName();?></div>
in code php. i have function getProductBy($value){....}. in view i have grid product, in column action i want when chose option edit value will set variable $value.
Html code, (Assuming Jquery included)
<script type="text/javascript">
function getNewFunction(val) {
$.ajax({
url: "./myPhp.php",
method: 'POST',
data: {
'value': val
},
success: function(res) {
console.log(res);
}
});
}
</script>
<select onchange="getNewFunction(this.value)" name="action-grid">
<option selected > Select</option>
<option value="1" >First</option>
</select>
myPhp.php
<?php
echo $_POST['value'];
?>
As per you mentioned in comments
Your script
<script type="text/javascript">
function getNewFunction(gridValue){
$.ajax({
type: 'POST',
url : 'some_file.php',
data: {value: gridValue},
success: function(response) {}
})
}
</script>
in some_file.php file
<?php
$value = $_POST['value'];
//your funtion here
function getProductEdit($value)
{
.....
}
?>
<select onchange="getNewFunction($('option:selected', this))" name="action-grid">
<option selected>Select</option>
<option value="2">Second</option>
</select>
<script type="text/javascript">
function getNewFunction(value) {
alert(value.text());
}
</script>
try this way
demo
I am using a plugin for a dropdown that prevents me from using change() to find when a dropdown option is selected. How would I do the same with select() which it supports?
I currently have:
<select id="dropdown" name="dropdown">
<option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
<option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
<option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
<option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
<option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>
<script type="text/javascript">
$('#dropdown').ddslick({
showSelectedHTML: false
});
$(document).ready(function() {
$('#dropdown').select(function() {
var blah = selected dropdown // mock code
$.ajax({
type: "POST",
url: "data.php",
data: {'data': blah},
success: function(data) {
$('#questions_body').hide().html(data).fadeIn('500');
},
dataType: "HTML"
});
});
});
</script>
I don't think the select() method has anything to do with this. From the plugin page, though:
onSelected: Callback function when an option is selected in the drop down. See demo 3 above.
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});