Develop Reference

Multiple Class in the PHP and 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>

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

Get Value from Combo Cox (view) and send to controller without loading page

How I can take value from view's code igniter to controller without loading page.. I have 2 class in controller, index and create_data.
I need to print $test dinamically
How can I make my code work?
View
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange()="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
Controller
function index(){
$data['combo'] = comboData();
$test = $this->input->post();
$data['test'] = $test;
echo $test;
if ($test==1) {
doSomething();
} else{
doNothing();
}
$this->template->display('example/index',$data);
}

|| view
<?php echo form_open("example/create_data", "class='form-horizontal' row-border")?>
<select name="example" onchange="change_option()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="your_second_dropdown_id_name">
<option value="0">no data</option>
</select>
<button type="submit">Tambah</button>
<?php form_close()?>
||javascript/jquery
var category_id = $(this).val();
$.ajax({
type: "POST",
data: category_id,
url: "<?= base_url() ?>learning/dependent_dropdown",
success: function(data) {
$.each(data, function(i, data) {
var opt = $('<option />');
opt.val(data.id_type);
opt.text(data.name);
$('#your_second_dropdown_id_name').append(opt);
});
}
});

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

How to send 2 select box dynamically generated values via ajax to get 3rd select box values

I'm trying to get 3rd select box values according to first 2 select box selection (dynamic values);
jQuery ajax code is (It only works with airport select box)
$("#airport").change(function() {
var aid=$(this).val();
var dataString = 'aid='+ aid;
$.ajax
({
type: "POST",
url: "booking/findcompany.php",
data: dataString,
cache: false,
success: function(data) {
$("#company").html(data);
}
});
});
<select name="site" id="site" class="site">
<option value="" selected="selected">Select</option>
<option value="1">Site One</option>
<option value="2">Site Two</option>
<option value="3">Site Three</option>
</select>
<select name="airport" id="airport" class="airport">
<option value="1">Airport One</option>
<option value="2">Airport Two</option>
<option value="3">Airport Three</option>
</select>
<select name="company" id="company" class="company">
//Options here based on above 2 selected values
</select>
PHP code is findcompany.php
<?php
if($_POST['aid']) {
$aid=$_POST['aid'];
$site=$_POST['sid']; <<<<<< How Can I pass This ID
$compsql=mysql_query("select * from tbl_company Where air_id='$aid' and site_id='$sid'");
while($rows=mysql_fetch_array($compsql)){
$cid=$rows['comp_id'];
$cdata=$rows['comp_title'];
?>
<option value="<?php echo $cid; ?>"><?php echo $cdata; ?></option>
<?php } } ?>

use $('#site').val() to get the value of the 1st select box, and then add it to your dataString. So now your js code would look like -
$("#airport").change(function()
{
var aid=$(this).val();
var sid=$('#site').val();
var dataString = 'aid='+ aid +'&sid='+sid;
...