this is my table in the database

tbl_job_title

ID | Job_title    | description     | 
1  | Accountant   | Handle Accounts |
2  | Dev. Support | Support Centre  |

when selecting the job title from the table, i'm using a drop down menu and here is my code.

<select id="job_title" >
   <option value=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

and I have a textbox that will populate if i select a job_title

<input type="text" id="catch_value">

How do I populate the textbox when I select example is "Accountant", the textbox value must be "Handle Accounts".

this is my table in the database

tbl_job_title

ID | Job_title    | description     | 
1  | Accountant   | Handle Accounts |
2  | Dev. Support | Support Centre  |

when selecting the job title from the table, i'm using a drop down menu and here is my code.

<select id="job_title" >
   <option value=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

and I have a textbox that will populate if i select a job_title

<input type="text" id="catch_value">

How do I populate the textbox when I select example is "Accountant", the textbox value must be "Handle Accounts".

• javascript
• php
• jquery
• html

4 Answers 4

Here is the short & sweet code I have made just for you, feel free to use it! Not required Ajax...

CODE -

<select id="job_title" >
   <option value="" class="job" role=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>" class="job<?php echo $row['id']; ?>" role="<?php echo $row['description']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

Jquery -

$('#job_title').on('change',function(){
    var m = this.value;
    var n = $('.job'+m).attr('role');
    $('#catch_value').val(n);
    return false;
});

eg - fiddle

<select id="job_title" onchange="javascript:callajaxvalue(this.value);">
   <option value=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

<script>
    function callajaxvalue(id)
    {
          $.ajax({
           type: "POST",
           url: "some.php",
           data: { id: id}
            success: function(data, textStatus ){
                if(data)
                { $("#catch_value").val(data);}
            },
          })
    }
</script>

some.php

$_POST['id'];

$query = "get data from table";

execute query.

echo $row['description'];

For codeigniter

function callajaxvalue(id)
    {
          $.ajax({
           type: "POST",
           url: "my_controller/update/"+id,
           data: { id: id}
            success: function(data, textStatus ){
                if(data)
                { $("#catch_value").val(data);}
            },
          })
    }

my_Controller.php

    public function update()
    {
        $id = $this->input->post('id');
        $data['discription'] = call model function for get data form database

        echo json_encode($data);
    }

 $('#job_title').change(function(){
  $('#catch_value').val('Handle Accounts');
 }); 

see fiddle:fiddle

or you can add if statments

 $('#job_title').change(function(){
    var jt = $('#job_title').val();
if(jt == "Something")
{
  $('#catch_value').val('Handle Accounts');
}
if (jt == "SomethingElse")
{
   $('#catch_value').val('somethingelse');
}
 }); 

This is the right answer :

    <select id="job_title" onchange='populate()'>
   <option value=""> </option>
    <?php foreach ($job_title as $row): ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
   </option>
 <?php endforeach?>
  </select>

   <script>
       function populate(){
        var jobttl= document.getElementById('job_title').value();
        if(jobttl){
          document.getElementById('catch_value').value;
        }

        }
   </script>