Fetch Database Value to multiple textboxes based on dropdown value in php - php

Question

I want to populate textbox values automatically from DB based on dropdown selection.....I have tried this, but after selecting dropdown the page is refreshing but the values are not populated onto textbox....need Help!!
Table
Controller:
public function isrexpense()
{
$data['query'] = $this->Isr_model->getstates();
$data['names'] = $this->Isr_model->getAllNames();
$data['query1'] = $this->Isr_model->test();
$this->load->view("header");
$this->load->view('Isr/isrexpense', $data);
$this->load->view("footer");
}
Model:
function test()
{
$this->db->select('da_hq');
$this->db->from('isr_policy_master');
$this->db->where('state', $this->input->post('state'));
$query = $this->db->get();
return $query->result();
}
View:
<select class="js-example-basic-single form-control">
<?php
foreach($names as $row)
{
echo '<option></option>';
echo '<option value="'.$row->name.'">'.$row->name.'</option>';
}
?>
</select>
<select class="state form-control" id="state" name="state">
<?php
foreach($query as $row)
{
echo '<option value="'.$row->state_code.'">'.$row->state_name.'</option>';
} ?>
</select>
<script>
$('#state').on('change', function(){
var mainselection = this.value; // get the selection value
$.ajax({
type: "POST", // method of sending data
url: "<?php echo site_url(); ?>/Isr/isrexpense",
data:'selection='+mainselection,
success: function(result)
{
$("#hqda").html(result);
}
});
});
</script>
<input id="hqda" name="hqda" class="form-control" required type="number">

Answer 1

Controller :
public function isrexpense()
{
$data['query'] = $this->Isr_model->getstates();
$data['names'] = $this->Isr_model->getAllNames();
$this->load->view("header");
$this->load->view('Isr/isrexpense', $data);
$this->load->view("footer");
}
public function getValFromDb()
{
$state = $this->input->post('selection');
$query1 = $this->Isr_model->test($state);
echo json_encode(array('data'=>$query1));
}
Model:
function test($state)
{
$this->db->select('da_hq');
$this->db->from('isr_policy_master');
$this->db->where('state', $state);
$query = $this->db->get();
$result = $query->result();
if(count($result)>0)
{
return $result[0]['da_hq'];
}
else
{
return '';
}
}
View :
<script>
$('#state').on('change', function(){
var mainselection = this.value; // get the selection value
$.ajax({
type: "POST", // method of sending data
url: "<?php echo site_url(); ?>/Isr/getValFromDb",
data:'selection='+mainselection,
success: function(result)
{
console.log(result); // check this in your console and if require than use JSON.parse to get value
$("#hqda").val(result.data);
}
});
});
</script>

Answer 2

Textboxes don't have an "innerHTML" property. If you want to set the content of a textbox, you should set its value property. In jQuery you do this using the .val() method.
Replace
$("#hqda").html(result);
with
$("#hqda").val(result);
Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
and http://api.jquery.com/val/
P.S. You may also want to take a look at what your AJAX call returns - it's not clear whether it would return the content you're looking for or not - it appears to return a whole HTML view, rather than just a single value to place into a textbox.