ColdFusion结构和Ajax

Question

I have a simple form with a select and a text box. Using the change function, I call a cfc that runs a query and returns a result: right now, as a struct. As odd as this may sound, I need help getting the data out of that struct and into the text box.

Below is what I have for the cfm and the cfc. Any help would be REALLY appreciated.

test.cfm (this is just a simple form)

<cfquery name="getHRSpecialists" datasource="AOO">
    SELECT * FROM [52PrepHRSpecialists]    
</cfquery>

<script src="jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
    $textBox6 = $("#textBox6");
    $("#textBox5").change(function(e) {
        var selected = $(this).val();
        console.log('change:', selected);
        if(selected === '') return;
        $.get("getHRPhone.cfc?method=getPhone", {textBox5:selected}, function(res) {
            $textBox6.html(res);
        });
    });
});
</script>

<cfform>
    <cfselect name="textBox5" id="textBox5" title="Select You Human Resource Specialist's Name" class="headerFields">
       <option value="">Choose a Specialist</option>
       <cfoutput query="getHRSpecialists">
           <option value="#hrSpecName#">#hrSpecName#</option>
       </cfoutput>    
    </cfselect>

    HRS's Phone #: 
    <cfinput id="textBox6" 
           name="textBox6" 
           type="text" 
           title="Your Human Resource Specialist's Phone ##"
           readonly>

</cfform>

getHRPhone.cfc (this is the cfc that gets referenced from the ajax call)

<cfcomponent output="false"> 
    <cffunction name="getPhone" access="remote" output="true" returntype="struct" returnformat="json">
        <cfargument name="textBox5" type="string" required="true" >

        <cfquery name="getPhone" datasource="AOO">
            SELECT hrSpecPhone
            FROM   [52PrepHRSpecialists]
            WHERE  hrSpecName = '#arguments.textBox5#'
        </cfquery>

        <cfset local.obj =  {phone = getPhone.hrSpecPhone} >        

        <cfreturn local.obj>
    </cffunction>
</cfcomponent>

Data (this is the data I get back)

{"PHONE":"123-456-7890"}

All I need is the actual phone number in the input box based on whoever is selected.

Answer 1

You're almost there, just need to get the phone number from the JSON object returned.

replace this:

    $textBox6.html(res);

with this:

    var data = $.parseJSON(res);
    // console.log(data);
    $textBox6.val(data.PHONE);