Onchange echo value probelm

Question

I have a problem to create the select box then get the value to show in the other input field.

Below is what I have tried the code:

<div class="form-group">
                    <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</span></label>
                    <div class="col-lg-3">

                        <select class="form-control blank" id="parentid" name="parentid" title="parentid">
                        <option>Please Select</option>
                        <option value="0">New Category</option>
                        <?php
                        $sql_incharge = 'select * from filing_code_management where status=1 order by id';
                        $arr_incharge = db_conn_select($sql_incharge);
                        foreach ($arr_incharge as $rs_incharge) {
                            $folder_location = $rs_incharge['folder_location'];
                            $function_code_select = $rs_incharge['function_code'];
                            echo '<option value="' . $rs_incharge['category_id'] . '">' . $rs_incharge['name'] . '</option>';

                        }
                        ?>
                        </select> &nbsp;&nbsp;
                                        <!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
                    </div>
                    </div>
                   <div class="form-group">
                        <label for="cp1" class="control-label col-lg-4">Function Code:</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" value="<?php echo $function_code_select;?>">
                        </div>
                    </div>

I have define $function_code_select = $rs_incharge['function_code']; because I need to get the function code number to show in the second input field, so that the second input field I have written echo $function_code_select; to show the value, but it cannot work. Hope someone can guide me how to solve it. Thanks.

Below is the sample what I need to show the output. If work it can show me correct the function_code in the second input field:

Answer 1

You can't do that with PHP, it's a server-side script lang. Add some javascript to make the magic happen:

<div class="form-group">
  <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</span></label>
  <div class="col-lg-3">
    <select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
      <option>Please Select</option>
      <option value="New Category_value">New Category</option>
      <?php
                        $sql_incharge = 'select * from filing_code_management where status=1 order by id';
                        $arr_incharge = db_conn_select($sql_incharge);
                        foreach ($arr_incharge as $rs_incharge) {
                            $folder_location = $rs_incharge['folder_location'];
                            $function_code_select = $rs_incharge['function_code'];
                            echo '<option value="' . $rs_incharge['category_id'] . '">' . $rs_incharge['name'] . '</option>';

                        }
                        ?>
    </select> &nbsp;&nbsp;
    <!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
  </div>
</div>
<div class="form-group">
  <label for="cp1" class="control-label col-lg-4">Function Code:</label>
  <div class="col-lg-3">
    <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" value="<?php echo $function_code_select;?>">
  </div>
</div>

<script>
  function getComboA(selectObject) {
    var value = selectObject.value;
    document.getElementById("function_code").value =value;
  }
</script>

Answer 2

If you need to keep value="", you can add an extra attribute like data-function-code=""

<div class="form-group">
  <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</span></label>
  <div class="col-lg-3">
    <select onchange="getComboA()" 
            class="form-control blank" 
            id="parentid" 
            name="parentid" 
            title="parentid">
      <option>Please Select</option>
      <option value="New Category_value" 
              data-function-code="' . $rs_incharge['function_code'] . '">  
        New Category
      </option>
      <?php
               $sql_incharge = 'select * from filing_code_management where status=1 order by id';
               $arr_incharge = db_conn_select($sql_incharge);
                   foreach ($arr_incharge as $rs_incharge) {
                       $folder_location = $rs_incharge['folder_location'];
                       $function_code_select = $rs_incharge['function_code'];
                        echo '<option value="' . $rs_incharge['category_id'] . '">' . $rs_incharge['name'] . '</option>';

                    }
       ?>
    </select>
  </div>
</div>
<div class="form-group">
  <label for="cp1" 
         class="control-label col-lg-4">Function Code:</label>
  <div class="col-lg-3">
    <input type="text" 
           class="form-control" 
           id="function_code" 
           name="function_code" 
           title="function_code" 
           value="<?php echo $function_code_select;?>">
  </div>
</div>

<script>
  function getComboA() {
    var sel = document.getElementById('parentid');
    var selected = sel.options[sel.selectedIndex];
    var data = selected.getAttribute('data-function-code');
    document.getElementById("function_code").value =data;
  }
</script>