We Keep Coding

How to auto populate textbox when dropdown is selected

i'm trying to auto populate text-box when drop-down is selected. I've tried some code but nothing happen i already included the jquery file in my code.
I have a database table called services and the column are service_id, service_name, service_price.
Here's My view
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Service</label>
</div>
<div class="col-lg-4">
<div class="form-select-list">
<select class="form-control custom-select-value" id="service_name" name="service_name">
<option>Select Service</option>
<?php foreach ($service as $services): ?>
<option value="<?php echo $services->service_id; ?>"><?php echo $services->service_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Price</label>
</div>
<div class="col-lg-4">
<input type="text" id="price" name="price" class="form-control" />
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>
Controller
function add_form($patient_id){
$data['service']=$this->services_model->get_all_services();
$data['value'] = $this->patient_model->get_selected_patient($patient_id);
$this->load->view('header/header');
$this->load->view('Records/add_records',$data);
$this->load->view('footer/footer');
}
function getprice($service_id){
$laiza=$this->db->get_where("services",array("service_id"=>$service_id));
foreach ($laiza->result() as $row){
$arr = array('service_price' => $row->service_price);
header('Content-Type: application/json');
echo json_encode($arr);
}
}
I expect that when i select a data from dropdown the textbox will populate the price base on the selected item dropdown

ID selector # missing when your getting the Service_Name value
Change the same to
var service_id=$("#service_name").val();
or
var service_id= this.value;
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("#service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>

show data in another dropdown, related first dropdown data

I have two divs. One is input type text (Searching for city) and another is select option (Select area based on city search. ). If I type city name in first div then related city show in dropdown and when I select any city then related area in second div should be show.
My fronend is:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15">
<input type="text" name="selectcity" id="selectcity" class="selectcity tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15" >
<select required id="selectarea" class="form-control" name="selectarea">
<option value="">Select Area</option>
</select>
</div>
</div>
Now script is:
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function() {
$('input.selectcity').typeahead({
name: 'selectcity',
remote: 'search.php?key=%QUERY',
limit: 10
}).on('typeahead:selected', function(e){
var selectedcity = $(this).val();
$.ajax({
type: "POST",
url: "process-request.php",
data: "selectcity=" + selectedcity,
}).done(function(data) {
$("#selectarea").html(data);
});
});
});
search.php is:
<?php
include("connection.php");
$key=$_GET['key'];
$array = array();
$query=mysql_query("select * from location_master where status1='1' AND location LIKE '%{$key}%'");
while($row=mysql_fetch_array($query))
{
$array[] = $row['location'];
}
echo json_encode($array);
?>
process-request.php is
<?php
include("connection.php");
if(isset($_POST["selectcity"])){
$selectcity = $_POST["selectcity"];
$query1=mysql_query("select * from location_master where parent_id='$selectcity'") or die (mysql_error());
if($selectcity !== 'Select City'){
echo"<option value=''>Select Area</option>";
while($value = mysql_fetch_array($query1)) {
?>
<option value="<?php echo $value['id'];?>" ><?php echo $value['location'];?></option>
<?php
}
}
}
?>
But in search.php $array[] = $row['location']; display accurate city. But it gives null id for area.
If I $array[] = $row['id']; then I type city in text box, then ID is showing in dropdown and gives accurate area in area option.
But I need display city in dropdown but ID should be pass of related city for area option.

Use value from a form in a redirect button outside the form

Fetch selected value from dropdown which is in one form and onClick of the button outside the form send the value to php page
<div class="drpvendorname">
<font style="color: white;">
<label>Distribution Point:</label>
</font>
</div>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option onClick="distribution('.$result['pointshortname'].')" value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form><!--form1 ends here-->
<form action="../customer/form.php"><!--form2 starts here-->
<button class="btn pos7" name="abc" method="GET" style="margin-left:5%;">New Customer</button>
</form><!--form2 ends here-->
<div class="dailybreakupbtn">
<input class="btn" type="submit" id="dailybreakupbutn" name="dailybreakup" value="Enter Daily Breakup" onClick="distribution(<?=$pointname?>)"/>
</div>
<?php
if(isset($pointname)){
?>
<script type="text/javascript">
function distribution(pointname){
var pointname;
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<?php
}
?>
I have tried this sending selected dropdown box value to next page using function name distribution
I ended sending undefined to the next page.
can any one help me sending the selected value to the next page with out putting the button in the <form>

May this will be help you :)
Html code:
<form action= "" method= "post">
<select class="form-control drpvendor" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="'.$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form>
JQuery Code:
$(doucment).on('change','.drpvendor',function(){
var data=$(this).attr('selected','selected');
$.ajax({
url: "dailybreakup.php",
data:'query='+ data,
type: "POST",
success: function(data) {
window.location.href='customer/form.php';
}
});
});

Use code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> // please link the path or use cdn
<script type="text/javascript">
function call_me(){
var pointname=document.getElementById("drpvendor").value;
alert(pointname); // comment it after testing
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<form>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
<input type="button" onclick="call_me()"/>
</form><!--form1 ends here-->
Note : 1) Code is not tested
2) use your select id instead of your_select_id
3) check variable

Using Ajax with Codeigniter

I saw few pages but tried all and none worked for me.
This is what i want:
on my html:
<form class="form-horizontal" role="form" method="POST" action="">
<select name="customer_id" id="customer_id" class="form-control">
<option>Select customer</option>
<?php foreach($customers AS $customer): ?>
<option value="<?php echo $customer->id;?>"><?php echo $customer->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label for="category" class="col-xs-4 control-label">Category</label>
<div class="col-sm-4 col-xs-8">
<input type="text" class="form-control" name="category" id="category" placeholder="Category" disabled="disabled">
</div>
</div>
Then i have a script to auto fill the category field depending on the customer selected, ass on the database each customers fall into different categories.
<script type="text/javascript">
$(document).ready(function() {
$('#customer_id').change(function() {
var customer_id = $("#customer_id").val();
$.ajax({
type: "POST",
url: <?php echo base_url(). 'customer/getCustomerCat' ; ?>,
data: form_data,
success: function(cat)
{
$("#category").val(cat);
}
});
});
});
</script>
Then on my controller i have:
public function getCustomerCat(){
$id = $this->input->post('customer_id');
$category = $this->customer_model->getCustomerCat($id)[0]->category;
echo $category;
}
On my Model i have:
public function getCustomerCat($id){
$query ="SELECT category FROM customers WHERE id=$id";
$query = $this->db->query($query);
return $query->result();
}
I am not so good with ajax but expected the categoory field to be populated after selecting a customer without reloading the page.

Passing a value through $_GET with jquery function

I want to pass a drop down value through $_GET with a jQuery function
Here is my code:
<div class="span2 text-right">
<label class="f-s15">Choose Exam to take:</label>
</div>
<div class="span3">
<select name="test_tag" id="test_tag">
<?php
foreach($array2 as $value2){ ?>
<option value ="<?php echo $value2['_id']; ?>"><?php echo $value2['score_type']; ?> </option>
<?php
}
?>
</select>
Here is my jQuery function:
function passTag() {
var selectedvalue = jQuery('#test_tag').val();
location.href="test_new.php?id="+selectedvalue;
}
Now when I print_r($_GET), I don't get anything...

Try this
jQuery(document).ready(function(){
jQuery("#test_tag").change(function(){
var selectedvalue = jQuery('#test_tag').val();
location.href="test_new.php?id="+selectedvalue;
})
})