javascript - 清除更改功能的表单字段会删除表单发布值

Question

我试图阻止用户不选择 jquery 自动完成选项。我有以下代码，它正在运行，但是当我提交表单时，'hidden_​​applinput_' + applid 字段值被删除。下面是代码

$(function() {
try {
    $("[id^=applinput_]").each(function(){
        app_id = this.id.split("_");
        id = app_id[1];

    $("#applinput_"+ id).autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "cfc/cfc_App.cfc?method=getMethod&returnformat=json",
                dataType: "json",
                data: {
                    nameAppSearchString: request.term,
                    maxRows: 25,
                    style: "full",
                },

                success: function(data) {
                    response(data);
                }
            })
        },
        select: function(event, ui) {
                //separate id and checkbox
                app_selid = this.id.split("_");
                //separate id 
                applid = app_selid[1];  
        $(this).val(ui.item.label);
        $('#hidden_applinput_' + applid).val(ui.item.value);
        $('#typeinput_' + applid).val(ui.item.type);
        $('#hidden_typeinput_' + applid).val(ui.item.typeID);
        return false;
        },
        change: function (event, ui) {
            if (!ui.item) {
                this.value = '';
                $('#hidden_applinput_' + applid).val('');
                }
            else{
             // return your label here
            }
        },
    })
})
.data( "autocomplete" )._renderItem = function( ul, item ) 
    {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append('<a onmouseover=$("#span' + item.value + '").show(); onmouseout=$("#span' + item.value + '").hide();><span style="float:left;" >' + item.label + '</span><span  id="span' + item.value + '" style="float: right;height:inherit; font-size: 13px; font-weight: bold; padding-top: 0.3em; padding-right: 0.4em; padding-bottom: 0.3em; padding-left: 0.4em; display: none; cursor:pointer; " onclick=javascript:event.stopPropagation();showprofile("' + item.value + '");><!---view profile---></span><div style="clear:both; height:auto;"></div></a>')
        .appendTo( ul );
    };      
} catch(exception){}
});

问题出在change事件上

$('#hidden_applinput_' + applid).val('');

如果我删除它，表单将发布值。还有其他方法吗？

编辑

我正在添加一些 HTML 代码来帮助解决这个问题。我希望尽可能简单，所以请询问您是否希望看到更多代码。这是一个管理脚本，所以我必须对某些事情保密。我正在使用 Coldfusion 和 jQuery。相关HTML/CFM代码如下。

<cfquery name="qApp2">
SELECT *
FROM AppType
WHERE (AppTypeID NOT IN (<cfqueryparam cfsqltype="cf_sql_varchar" value="#Applist#" list="yes">))
ORDER BY AppOrder
</CFQUERY>
  <cfset index = 1>
  <cfloop query="qApp2">

  <!--- App Query --->
    <cfquery name="qMasterApp">
    SELECT *
    FROM App
    WHERE AppType = <cfqueryparam value="#AppTypeID#" cfsqltype="cf_sql_varchar">
    </cfquery>

  <h3 id="header_#index#">inactive - #AppType#</h3>
     <div>
        <p> 
            <!---- Serial Number --->
            <div class="ctrlHolder" id="serial_#index#"><label for="" class="serial" style="display:none"><em>*</em>Serial Number</label>
                <cfinput type="text"
                            name="app_#AppTypeID#_ser"
                            data-default-value="Enter Serial Number or Value"
                            size="35" 
                            class="textInput"
                            id="serialinput_#index#"
                            value=""  disabled />
                    <!---<cfinput name="app_#AppTypeID#_IDd" type="hidden" id="hserialinput_#index#" value="" disabled />--->
                  <p class="formHint">field is required</p>
            </div>
            <!--- App --->
            <div class="ctrlHolder" id="appl_#index#"><label for="" style="display:none"><em>*</em>App</label>
                <cfinput name="app_#AppTypeID#_app" 
                    data-default-value="App"
                    class="textInput AppSearch"
                    id="applinput_#index#"
                    value="" disabled>
                    <cfinput name="app_#AppTypeID#_IDd" type="hidden" class="hidden_AppSearch" id="hidden_applinput_#index#" value="" />

              <p class="formHint">App is required</p>
            </div>
            <!--- active --->
            <div class="ctrlHolder" id="color_select">
              <ul class="list">
                <li>
                <label for="agreement">
                <input type="checkbox" id="checkbox2_#index#" name="app_#AppTypeID#_chk" style="width:50px"> 
                active
                </label>

                </li>
                <li>
                <a class="dig3">[add an App]</a>
                </li>
              </ul>
            </div>
       </p>
       </div>
      <cfset index = index + 1>
      <cfset Applist = ListAppend(Applist,AppTypeID)>
  </cfloop>

Answer 1

$('#hidden_applinput_' + applid).val('');

上面的代码片段失败，因为 applid 在当前范围内未定义，即更改事件处理程序。在您的情况下，您通过添加 try..catch block 抑制了所有错误，因此 js 控制台中没有错误。

您的更改事件处理程序应如下所示:

change: function (event, ui) {
        if (!ui.item) {
            this.value = '';
            app_selid = this.id.split("_");
            applid = app_selid[1];
            $('#hidden_applinput_' + applid).val('');
            }
        else{
         // return your label here
        }
    },