How to auto set the textbox based on dropdown selection? - php

Question

How to auto set the textbox based on dropdown selection? I have a dropdown for position and textbox for department. What I would like to do is when "Guidance Faculty" is selected from dropdown, the textbox will automatically set to "Guidance" and it will become readonly and same in when "OSA Faculty" is selected from dropdown, the textbox will automatically set to "OSA" and it will become readonly. While if "Department Chair" and "Professor" is selected nothing will happen to textbox or it will set to "".
<div class="form-group">
<label for="position">Position</label>
<?php
echo form_open('signup');
$options = array(
'' => 'Select Position',
'Department Chair' => 'Department Chair',
'Professor' => 'Professor',
'Guidance Faculty' => 'Guidance Faculty',
'OSA Faculty' => 'OSA Faculty',
);
echo "<div class='drop_pos'>";
echo form_dropdown('position', $options, 'class="btn dropdown-toggle"', 'data-toggle="dropdown-menu"');
?>
<div class="text-danger"><?php echo form_error('position');?></div>
</div>
</div>
<div class="form-group">
<label for="department">Department</label>
<input class="form-control" name="department" placeholder="Department" type="text" value="<?php echo set_value('Department');?>"/>
<span class="text-danger"><?php echo form_error('department');?></span>
</div>

Answer 1

Try this:
<div class="form-group">
<label for="position">Position</label>
<?php
echo form_open('signup');
$options = array(
'' => 'Select Position',
'Department Chair' => 'Department Chair',
'Professor' => 'Professor',
'Guidance Faculty' => 'Guidance Faculty',
'OSA Faculty' => 'OSA Faculty',
);
echo "<div class='drop_pos'>";
echo form_dropdown('position', $options, 'class="btn dropdown-toggle"', 'data-toggle="dropdown-menu" onChange="javascript:document.getElementsByName(\'department\').value=this.value;"');
?>
<div class="text-danger"><?php echo form_error('position');?></div>
</div>
</div>
<div class="form-group">
<label for="department">Department</label>
<input class="form-control" name="department" placeholder="Department" type="text" value="<?php echo set_value('Department');?>"/>
<span class="text-danger"><?php echo form_error('department');?></span>
</div>

Answer 2

Make use of JS like below.
First set dropdown box like this...
echo form_dropdown('position', $options, array('id'=>'pos','class'=>'btn dropdown-toggle','data-toggle'=>'dropdown-menu','onchange'=>'changefuc();'));
Then add JS
<script type="text/javascript">
function changefuc(){
var pos = document.querySelector('#pos');
var dept = document.querySelector('[name="department"]');
pos.addEventListener('change',function(){
dept.value = this.value;
});
}
</script>
UPDATE
See demo
var pos = document.querySelector('#pos');
var dept = document.querySelector('[name="department"]');
pos.addEventListener('change',function(){
dept.value = this.value;
});
<select id="pos">
<option value="" selected >Select Position</option>
<option value="Department Chair">Department Chair</option>
<option value="Professor">Professor</option>
<option value="Guidance Faculty">Guidance Faculty</option>
<option value="OSA Faculty">OSA Faculty</option>
</select>
<input class="form-control" name="department" placeholder="Department" type="text"/>

Answer 3

in jquery something like this:
jQuery("select[name='position']").on("change", function() {
// value of selected option
var selectedPosition = $(this).val();
if (selectedPosition) {
// the inputbox
jQuery("input[name='department']").val(selectedPosition).attr('readonly', true);
} else {
jQuery("input[name='department']").val('').attr('readonly', false);
}
});