时间戳

首页 > 解决方案 > 如果 jquery 自动完成返回结果，则禁用按钮

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

问题描述

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

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

我可以让它工作，但是一旦我的消息出现“名称必须是唯一的”并且按钮被禁用，它就不会重新启用并将该消息更改为“名称是唯一的”。

我究竟做错了什么？

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

标签： javascriptjquerycoldfusioncfc

解决方案

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

在那个函数中，我包含了一个 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>

推荐阅读