How to show data from selected option in a dropdown to a textbox using cfquery where the id = selected option in the dropdown?

Question

Check the Image here for reference

What I want is that when I click/change dropdown for itemcode it will show the corresponding data for that particular ID on the textbox beside it. 1 for Item Description and the other is for the Item Price My CFQUERY is :

<cfquery name="getItemDesc" datasource="laundry" >
   SELECT * FROM items
   WHERE itemcode = <cfqueryparam cfsqltype="cf_sql_varchar" value="#FORM.getItemCode#">

</cfquery>    

My HTML code is :

    <table class="table" name="addedItem" class="addedItem" disabled>
    <tr>
        <td>
            <select class="form-control" name="getItemCode" id="getItemCode"  required disabled>
                <cfoutput query="getItem">
                <option value="#itemcode#">#itemcode#</option>
                </cfoutput>     
            </select>
        </td>           
        <td>
            <input type="text" class="form-control" placeholder=" Item Name" name="itemDesc" id="itemDesc" disabled/>
        </td>

        <td>
            <input type="text" class="form-control" placeholder=" Price" name="itemPrice" id="itemPrice" disabled/>
        </td>

        <td>
            <input type="text" class="form-control" name="itemQty" id="itemQty" placeholder=" Input Qty" disabled/>
        </td>

        <td>
            <button name="addItem" id="addItem" disabled><i class="fa fa-plus-circle " aria-hidden="true"></i> ADD</button>
        </td>
    </tr>

Your help is highly appreciated. I'm sorry, I'm just new here so if there's anything that is not properly explained, let me know :D

Answer 1

Thanks for those who answered my question. I will post my solution here for future reference.

<script>
    /* WHEN ITEMCODE onChange :JMGR*/
    function aa(){
        var itemdesc = $('#getItemCode').find(":selected").data('itemdesc');
        var itemprice = 
        $('#getItemCode').find(":selected").data('itemprice');
        document.getElementById('itemDesc').value=itemdesc;
        document.getElementById('itemPrice').value=itemprice;
        
        document.getElementById('tempItemDesc').value=itemdesc;
        document.getElementById('tempItemPrice').value=itemprice;
      
    }
    
</script>

<td>
<select class="form-control" name="getItemCode" id="getItemCode" 
onchange="aa()" required disabled>
<option value=""> -- </option>
<cfoutput query="getItem">
<option value="#itemcode#" data-itemdesc="#itemdesc#" data-
itemprice="#selling_price#">#itemcode#</option>
</cfoutput>	
<input type="hidden" name="tempItemCode" id="tempItemCode">
</select>
</td>

for ColdFusion Query:

<!--- DEFAULT QUERY for GETTING ITEMCODE--->
<cfquery name="getItem" datasource="laundry" >
    SELECT * FROM items;
</cfquery>

Answer 2

Try this,

<script type="text/javascript">
    $('#getItemCode').change(function(){
        $("form").submit():
    });
</script>

But the query should be in form's action page and the list should render from the result of that query. Otherwise this code won't work.