jQuery ReferenceError: function is not defined - php

Question

I have a simple jquery function that reflects the selected value of a dropdown to textbox but the problem is that the console says that my function was undefined. I put the function inside the onchange event of the dropdown. Please note that all of my jquery functions was on the bottom of the page..
and here is the dropdown:
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<?php
foreach($operation as $val)
{
?>
<option value="<?php echo $val['OperationName'];?>"><?php echo $val['OperationName'];?></option>
<?php
}
?>
</select>
<span class="text-danger"><?php echo form_error('operation');?></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
this is the operation array model
function getDeliveryDays($str)
{
$this->db->select('DeliveryDays');
$this->db->from('operation');
$this->db->where('OperationName',$str);
return $this->db->get()->result();
}
this is the controller:
public function getDays()
{
$id = $this->input->post('q');
$data['days'] = $this->wip_model->getDeliveryDays($id);
echo json_encode($data);
}
I took the working in my other project and use it in my current project but still the same result and when I inspect it in the dev tools, the said script is missing in view source but it's present in IDE:
this is the code:
function showDeliveryDay(operation)
{
$.ajax({
type: "POST",
url: "<?php echo site_url('wip/getDays/');?>",
data: {q:operation},
success: function(data){
console.log(data);
},
});
}
Thanks in advance....

Answer 1

Does you put the function inside domready? If so, remove that and placed it outside like so :
<script>
function showDays() {
var x = document.getElementById("operationName").value;
document.getElementById("deldays").innerHTML = x;
}
// domready here
$(function(){...}); // or $(document).ready(function(){...});
</script>

Answer 2

Make sure you are including your jquery in your code. try this:
jQuery( document ).ready(function() {
jQuery( "#operationName" ).change(function() {
var pVal = jQuery("#operationName").val();
jQuery("#deldays").val(pVal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<span class="text-danger"></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
</div>

Answer 3

You can refer this code
Html
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<span class="text-danger"></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
Js code
jQuery( document ).ready(function() {
jQuery('#operationName').on('change', function(){
var p=jQuery(this).val();
jQuery("#deldays").val(p);
});
});
You can view demo here