We Keep Coding

How can I insert an Ajax result into an input value?

How can I insert an Ajax result into an input value?
HTML/PHP
<select id="getcategory" name='categoryname' ><option>SELECT---</option>
<?php
$getcat = mysqli_query($con,"SELECT * FROM category ORDER BY categoryname ASC");
while($rec = mysqli_fetch_assoc($getcat)) { ?>
<option><?php echo $rec['categoryname']; ?></option><?php } ?>
</select><br>
<input class='categoryprefix' type='text' name='subcatprefix' />
Ajax
<script type="text/javascript">
$(document).ready(function(){
$("#getcategory").change(function(){
var cprefix = $(this).val();
$.ajax({
url: 'getCategory.php',
type: 'post',
data: {categoryname: cprefix},
success: function(data) {
$(".categoryprefix").append(data);
}
});
});
});
</script>
Note:
File getCategory.php is good

ajax not working displaying data into text area on dropdown change in php

i am trying to display data inside using ajax in php, i have done the following code:
<table>
<select id="staff" name="staff">
<option value="#N">N</option>
<option value="#R">R</option>
<option value="#S">S</option>
<option value="#J">J</option>
<option value="#So">So</option>
<option value="#Sr">Sr</option>
<option value="#Jo">Jo</option>
<option value="#Sc">Sc</option>
<option value="#P">P</option>
</select>
<textarea id="show" rows="8" name="notice" class="form-control"></textarea>
</table>
$('#customer').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "page2.php",
data: "pass_id=" + id,
success: function (data) {
alert(data);
document.getElementById("show").innerHTML = data;
}
});
});
below is my page2.php which fetches the data from database:
<?php
echo $get_id = $_GET['pass_id'];
include("db.php");
$sql = "select notice from admin where username='$get_id'";
while ($row = mysqli_fetch_array($sql)) {
echo $row['notice'];
}
?>
but this is not giving me any data in textbox area , can anyone please tell me what is wrong in my code?

You are using 'customer' instead of 'staff' please change and try
$('#staff').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "page2.php",
data: "pass_id=" + id,
success: function (data) {
console.log(data);
document.getElementById("show").innerHTML = data;
}
});
});
<?php
$data = [];
$get_id = $_GET['pass_id'];
include("db.php");
$sql = "select notice from admin where username='$get_id'";
while ($row = mysqli_fetch_array($sql)) {
$data[] = $row['notice'];
}
echo json_encode($data);
?>

Use $('#staff').change(function () {
because your Id is staff not customer.

Change your id customer to staff
$('#staff').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "page2.php",
data: "pass_id=" + id,
success: function (data) {
alert(data);
document.getElementById("show").innerHTML = data;
}
});
});
And also there is a mistake in your query, please try the below code.
<?php
$get_id = $_GET['pass_id'];
include("db.php");
$sql = "select notice from admin where username='$get_id'";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
echo $row['notice'];
}
?>
Hope it will help.

Dynamic Dependent Dropdown List Country and State on Code Igniter

I am working on project that uses a dynamic or dependent dropdown list on CodeIgniter. This is my noob logic, the country value from Views passed to Models, then the Models get state data with same country value from Views, then Controllers get state data from that Models and pass it again to Views. And the problem is the state dropdown list show nothing.
Sorry, iam new in coding.
//This is the Controllers (Pkl.php)
$data['all_country'] = $this->Server_Model->get_country_model();
$data['all_state'] = $this->Server_Model->get_state_model();
$this->load->view('contents/page_dashboard', $data);
//This is the Models (Server_Model.php)
function get_country_model(){
$db_jarlap = $this->load->database('gis_bali', TRUE);
$db_jarlap->select("*");
$db_jarlap->from("country");
$que = $db_jarlap->get();
return $que->result();
}
function get_state_model(){
$kakakoko = filter_input(INPUT_POST, 'country_id');
$db_jarlap = $this->load->database('gis_bali', TRUE);
$db_jarlap->select("*");
$db_jarlap->from("state");
$db_jarlap->where(" id_country = $kakakoko ");
$que = $db_jarlap->get();
return $que->result();
}
//This is the Views Content (page_dashboard.php)
<script src="<?php echo base_url() ?>resources/js/jquery-3.3.1.min.js"</script>
<script>
$(document).ready(function(){
$('#formCountry').change(function(){
var country_id = $(this).val();
$.ajax({
url: "<?php echo base_url() ? >application/models/Server_Model.php",
method: "POST",
data: {country_id:country_id},
success: function(data) {
$('#formState').html(data);
}
});
});
});
</script>
<select name="formCountry" id="formCountry">
<?php foreach($all_country as $semua_country): ?>
<option value="<?php echo $semua_country->id_country; ?>"><?php echo $semua_country->nama_country; ?></option>
<?php endforeach; ?>
</select>
<select name="formState" id="formState" >
<?php foreach($all_state as $semua_state): ?>
<option value="<?php echo $semua_state->id_state; ?>"><?php echo $semua_state->nama_state; ?></option>
<?php endforeach; ?>
</select>
Thanks for your help.

You should not directly call model, instead call the Pkl controller, I'm assuming that you are using the index() method on Pkl controller :
$(document).ready(function () {
$('#formCountry').change(function () {
var country_id = $(this).val();
$.ajax({
url: "<?php echo base_url() ?>pkl", // using Pkl controller
method: "POST",
data: {
country_id: country_id
},
success: function (data) {
$('#formState').html(''); // empty the select option element
$.each(data, function(){ // format each option returned from Pkl controller
$("#formState").append('<option value="'+ this.id_state +'">'+ this.nama_state +'</option>');
});
}
});
});
});

change event not firing on ajax loaded elements

Second ajax call change event not working when I click on the first ajax loaded item. I doubt whether my $name1 in second ajax data:{name1: name1},
Dropdown
<select id="name">
<option style="display:none;" selected>Select Product</option>
</select>
This first ajax call will populate the dropdown box when the variable place is available
<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.ajax({
type: "POST",
data: {place: '<?= $_GET["place"] ?>'},
url: 'listplace.php',
dataType: 'json',
success: function (json) {
if (json.option.length) {
var $el = $("#name");
$el.empty(); // remove old options
$el.append('<option selected>Select language value</option>');
for (var i = 0; i < json.option.length; i++) {
$el.append($('<option>',
{
value: json.option[i],
text: json.option[i]
}));
}
}else {
alert('No data found!');
}
}
});
</script>
//Continued second ajax call when the option is clicked it will list product details
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#name").on('change',function (e) {
var name1 = this.value;
$.ajax ({
data:{name1: name1},
type: 'POST',
url: 'dataprod.php',
success: function (response) {
console.log(response);
$('.products-wrp').html('');
$('.products-wrp').hide();
$('.products-wrp').html(response);
$('.products-wrp').show();
},
});
});
</script>
<?php } ?>
dataprod.php
<?php
$name1 = $_POST['name1'];
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code,
product_image, product_price FROM products_list where product_name='$name1'");
$products_list = '<ul id ="products_list" class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;
}
$products_list .= '</ul></div>';
echo $products_list;
?>

dependent dropdown in wordpress theme files

I want to create state/city dependent dropdown in wordpress. This is my js file code
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#state').change(function(){
var $location = $(this).val();
alert($location);
$.ajax({
url:'ajaxurl',
type: 'post',
data: ({action : 'getcity'}),
success: function() {
$("#district").removeAttr("disabled");
$("#district").append(results);
}
});
});
});
</script>
I have created function called getcity in function.php and add hooks and action to that function and add this js file to theme js folder and enque it in function file. I m getting empty alert ?? Anybody has any idea??
add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php')."getcity"; ?>';
</script>
this is dropdown code
<p class="half_form half_form_last">
<label for="property_country"><?php _e('State ','wpestate'); ?></label>
<select name="state" id="state" class="select-submit2">
<option value="">Select state</option>
<?php
$result=$wpdb->get_results("select distinct(state) from tblcitylist");
//$wpdb->get_results($query);
foreach($result as $row) {
$state=$row->state;
echo '<option value="">'.$state.'</option>';
}
?>
</select>
</p>
In function.php
function getcity(){
global $wpdb;
if($_POST['state'])
{
$id=$_POST['state'];
$result=$wpdb->get_results("SELECT * FROM tblcitylist WHERE
state='$id'");
//$wpdb->get_results($query);
foreach($result as $row) {
$city_name = $row-
>city_name;
$city_id = $row->city_id;
echo '<option
value="'.$city_id.'">'.$city_name.'</option>';
//echo '<option value="'.'0'.'">'.'New Phase'.'</option>';
}
}
}
add_action("wp_ajax_nopriv_getcity", "getcity");
add_action("wp_ajax_getcity", "getcity");
I have included js file as follows in functions.php
wp_enqueue_script('my_own_js',
get_template_directory_uri().'/js/my_own_js.js',array('jquery'));

I think it's better to post it as an answer. I'd delete the var ajaxurl from the functions.php and use it inside the page. Then I don't see where you pass the location to the ajax. It should look like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#state').on('change', function() {
var location = this.value;
alert(location);
$.ajax({
type: "POST",
url:'<?php echo admin_url('admin-ajax.php'); ?>',
data: ({'action' : 'getcity', 'location' : location }),
success: function(results) {
$("#district").removeAttr("disabled");
$("#district").append(results);
}
});
});
});
</script>
then the Dropdown should look like this
<select id="state">
<option value="state1">state1</option>
<option value="state2">state2</option>
...
</select>
And for the getcity you have to get the right $_POST:
function getcity(){
global $wpdb;
if($_POST['location']){
$id=$_POST['location'];
$result=$wpdb->get_results("SELECT * FROM tblcitylist WHERE state='$id'");
$html = '';
foreach($result as $row) {
$city_name = $row->city_name;
$city_id = $row->city_id;
$html .= '<option value="'.$city_id.'">'.$city_name.'</option>';
}
}
}
add_action("wp_ajax_nopriv_getcity", "getcity");
add_action("wp_ajax_getcity", "getcity");