使用AJAX响应填充表单字段

我想根据form-field1的输入填充表单字段2。这是我的两个表单输入字段。使用AJAX响应填充表单字段

<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>

第一种形式字段由以下JavaScript填充和该部分的工作原理：

<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>

我则第一表单字段的值传递给经由AJAX一个CFC运行查询并填充结果的第二个表单字段。

<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>

这里是我的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>

我的第一个表单字段是否正常工作，我可以在萤火，从我的AJAX调用我的反应有数据看，但是我revieve控制台错误：

Uncaught ReferenceError: response is not defined

如何正确设置第二个表单字段的值与来自我的AJAX调用的响应？谢谢。

来源

2014-11-04 Brian Fleishman

我抓我的头试图找出这和“答案”之间的区别。然后我意识到没有。很高兴你知道了，但是尽量不要在原始问题中“修复”代码，因为那么答案不再有意义:)。回滚编辑以保留上下文。 – Leigh 2014-11-04 16:05:05

请注意，'cfquery'标签周围不需要'cfoutput'，不要忘记查询名称的'var/local'范围。 – Leigh 2014-11-04 16:06:14

哈哈。是的，这是有道理的。对于那个很抱歉。 BYW，我遗漏的部分，这是指什么？我明白，我们基本上是通过指定函数（响应）将响应数据传递到函数中，但是是否将函数调用作为范围函数？请原谅我对此的无知。 – 2014-11-04 16:07:40

我自己找到了答案。在界定我的成功功能时，我显然忽略了（共鸣）。

我改变了我的成功，函数这一点，它的工作：

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

来源

2014-11-04 15:12:14

使用AJAX响应填充表单字段

回答

相关问题