Disable button if jquery autocomplete returns results

Question

I'm using the jquery autocomplete to fetch data from a coldfusion CFC and display matching data when a user types.

That part is working, but I'd like to disable the submit button and show a message if there is data returned as that tells me that the data is not unique, which it needs to be.

I can sort of make it work but once my message appears "Name MUST BE Unique" and the button disables, it doesn't re-enable and make that message change to "Name is Unique".

What am I doing wrong?

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

Here is my 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>

Here is my form:

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

I was able to eventually figure this out my self. I created a separate function to check the name being entered into the field. The big difference was return a string instead of a query and testing the output that way.

In that function I included an if statement to perform tasks based on the results. I also created another CFC function dedicated to querying the database based on what was entered.

Hope this helps someone.

Here is my 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>     

Here is my form:

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

Here are my CFC functions:

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