Multiple Class in the PHP and Javascript - javascript

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

Laravel Dynamic Ajax Dependent Dropdown

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

JavaScript not work properly inside PHP while

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

codeigniter - use dependent dropdown with jquery twice in a page

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));
}
}
});
}

How do get valiable in html via jquery code?

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

jQuery: Selecting <option> contents with select() rather than change()

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;
}
});

Categories

Resources