Populate form field with AJAX response

Question

I am trying to populate form-field2 based upon the input of form-field1. Here are my two form input fields.

<input size="50" name="customer_name2" id="customer_name2" tabindex="0" onblur="checkFilled()" type="text" list="customers" />

<cftextarea name="customer_address" cols="50" rows="5" id="customer_address2" tabindex="0" onFocus="populateAddressField()"></cftextarea>

The first form field is populated by the following javascript and that part works:

<script>  
$(document).ready(function() {  
         $( "##customer_name2" ).autocomplete({
                source: "cfcs/past_customers.cfc?method=lookupCustomers&returnformat=json",
                minLength: 1,
                select: function(event, ui) {
                    $('##customer_name2').val(ui.item.value);
                }
           });
});
</script>

I then pass the value of the first form field to a CFC via AJAX to run a query and populate the the second form field with the results.

<script>
function populateAddressField(){                
            $.ajax({
            dataType: 'json',
            data:  {
                        customer_name2: $('##customer_name2').val()
                    },
            url: "cfcs/past_customers.cfc?method=getAddress&returnformat=json",
            beforeSend: function(){
                $('.loader').show();
            },
            complete: function(){
                 $('.loader').hide(3000);
            },
            success: function() {
              $("##customer_address2").val(response);
            }    
        });
}
</script>

Here is my CFC:

<cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />

<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>

<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
select distinct company_name
From closed_tickets
where ticket_type = "billable" AND company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>

<!--- Build result array --->
<cfloop query="data">
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = company_name/>
<cfset titleStruct['label'] = company_name />

<cfset arrayAppend(returnArray,titleStruct) />    
</cfloop>

<!--- And return it --->
<cfreturn returnArray />
</cffunction>

<cffunction name="getAddress" access="remote" returnType="string">
<cfargument name="customer_name2" type="any" required="true">

<!--- localize function variables --->
<cfset var addressDetail = "">
<cfoutput>
<cfquery name="addressDetail" datasource="#datasource#">
    SELECT company_address
    FROM   closed_tickets
    <!--- adjust cfsqltype if needed --->
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name2#" cfsqltype="cf_sql_varchar">
</cfquery>
</cfoutput>
<cfreturn addressDetail.company_address>
</cffunction>

<cffunction name="getEmailAddressDetail" access="remote" returnType="string">
<cfargument name="customer_name2" type="any" required="true">

<!--- localize function variables --->
<cfset var dataDetail = "">
<cfoutput>
<cfquery name="emailDetail" datasource="#datasource#">
    SELECT email
    FROM   closed_tickets
    <!--- adjust cfsqltype if needed --->
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>
</cfoutput>
<cfreturn dataDetail.email>
</cffunction>

<cffunction name="getPhoneDetail" access="remote" returnType="string">
<cfargument name="customer_name2" type="any" required="true">

<!--- localize function variables --->
<cfset var dataDetail = "">
<cfoutput>
<cfquery name="dataDetail" datasource="#datasource#">
    SELECT phone
    FROM   closed_tickets
    <!--- adjust cfsqltype if needed --->
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>
</cfoutput>
<cfreturn dataDetail.phone>
</cffunction>

</cfcomponent>

My first form field is working properly and I can see in firebug that my response from my AJAX call has data, however I revieve a console error:

Uncaught ReferenceError: response is not defined

How can I properly set the value of the second form field with the response from my AJAX call? Thanks.

I was scratching my head trying to figure out the difference between this and the "answer". Then I realized there was none. Glad you figured it out, but try not to "fix" code in the original question, because then the answer(s) no longer makes sense :). Rolled back edit to preserve context. — Leigh, Nov 04 '14 at 16:05
Side note, there is no need for `cfoutput` around the `cfquery` tags, and do not forget to `var/local` scope the query names too. — Leigh, Nov 04 '14 at 16:06
lol. Yeah that makes sense. Sorry about that. BYW, the part I left out, what is that referred to? I understand that we are basically passing the response data into the function by specifying function(response), but is that called scoping the function>???? Excuse my ignorance on this. — Brian Fleishman, Nov 04 '14 at 16:07
Well at least you came back with the solution, which is great for the next guy :) In the jQuery docs they call it function a "parameter" or "argument"- [depending on the POV](http://stackoverflow.com/questions/1788923/parameter-vs-argument) — Leigh, Nov 04 '14 at 16:11
*do you think you could mark my answer as accepted* Only the question author can do that. (Though S.O. might make you wait a few hours) — Leigh, Nov 04 '14 at 16:13

score 2 · Accepted Answer · answered Nov 04 '14 at 15:12

2

I found the answer on my own. I apparently left out (resonse) when defining my success function.

I changed my success function to this and it worked:

 success: function(response) {
          $("##customer_address2").val(response);
        }

answered Nov 04 '14 at 15:12

Brian Fleishman

1,237
3
21
43

Populate form field with AJAX response

1 Answers1