如果jquery自动完成返回结果，则禁用按钮

Question

我使用jquery自动完成从coldfusion CFC获取数据，并在用户键入时显示匹配的数据。

这一部分正在工作，但我想禁用提交按钮，并显示一条消息，如果有数据返回，因为这告诉我数据不是唯一的，它需要是唯一的

我可以让它工作，但一旦我的消息出现"；名称必须唯一"；并且按钮被禁用，它不会重新启用并使消息变为"0"；名称是唯一的"；。

我做错了什么？

这是我的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 company_name
From customer_table
where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>
<cfif #data.recordcount# eq 0>
<!--- Build result array --->

<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = 'No results'/>
<cfset titleStruct['label'] = 'No results' />
<cfset arrayAppend(returnArray,titleStruct) />    

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


<cfelse>
<!--- 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 />

</cfif> 
</cffunction>

这是我的Javascript：

<!---Autocomplete for customer name--->
<script>  
$(document).ready(function() {  
$( "#new_customer_name" ).autocomplete({
source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",
minLength: 1,
select: function(event, ui) {
$('#new_customer_name').val(ui.item.value);
},
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length == 0) {
$("#empty-message").text( "" );
//$("#empty-message").text( "Name is Unique" );
$("#add_new_customer_btn").prop('disabled', False);
} else if (ui.content.length != 0)  {
$("#empty-message").text( "Name MUST BE Unique" );
$("#add_new_customer_btn").prop('disabled', true);
}
}
});           
});
</script>

这是我的表格：

<!--- New customer modal --->                        
<div id="new-customer-modal" style="display:none; width:50%; padding:10px;">
<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name"><br><br>

<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*"> &nbsp;
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15"> &nbsp;
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*"> &nbsp;
<br><br>

<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>

<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>

Answer 1

我最终能够自己解决这个问题。我创建了一个单独的函数来检查输入到字段中的名称。最大的区别是返回字符串而不是查询，并以这种方式测试输出。

在该函数中，我包含了一个if语句，用于根据结果执行任务。我还创建了另一个CFC功能，专门根据输入的内容查询数据库。

希望这能帮助到别人。

这是我的javascript：

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

});           
});
</script>

<script>
function check_customer_name() {
<!--- Get customer name --->
$.ajax({
dataType: 'json',
data:  {
check_customer_name: $('#new_customer_name').val()
},
url: "cfcs/existing_customers_lookup.cfc?method=checkCustomers&returnformat=json",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function(response) {
// ui.content is the array that's about to be sent to the response callback.
console.log(response);
if ( response == 'unique') {
document.getElementById("empty-message").style.color = 'green';
document.getElementById('empty-message').innerHTML = "This company name is unique.";
$("#add_new_customer_btn").prop('disabled', false);

} else {
document.getElementById("empty-message").style.color = 'red ';
document.getElementById('empty-message').innerHTML = "Company name not unique. Please try again.";
$("#add_new_customer_btn").prop('disabled', true);

} 
}    
});
}
</script>     

这是我的表格：

<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer" method="post" action="actionpages/add_customer.cfm">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name" onblur:"check_customer_name();" onFocus="check_customer_name();" onChange="check_customer_name();"><pre class="response" id="empty-message"></pre><br><br>

<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*"> &nbsp;
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15"> &nbsp;
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*"> &nbsp;
<br><br>

<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>

<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>

以下是我的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 company_name
From customer_table
where 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="checkCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="string">
<cfargument name="check_customer_name" required="false" default="" />
<!--- localize function variables --->
<cfset var data = "">
<!--- Do search --->
<cfoutput>
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name = <cfqueryparam value="#ARGUMENTS.check_customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>
<cfif #data.recordcount# eq 0>
<cfset result = "unique">
<cfelse>
<cfset result = "taken">
</cfif>
<!--- And return it --->
<cfreturn result />
</cfoutput>
</cffunction>