Clear form field on change functionality removes form post value

Question

I am trying to prevent a user from not selecting a jquery autocomplete option. I have following code, which is working but when I submit the form, the 'hidden_applinput_' + applid field value is removed. Below is the code

$(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){}
});

The problem is in the change event

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

If I remove this the form will post the value. Is there another way to do this?

EDIT

I am adding some HTML code to help with this. I wish to keep this as simple as possible so please ask if there is more code you would like to see. This is an admin script so I do have to keep some things discreet. I am using Coldfusion along with jQuery. The relative HTML / CFM code is as follows.

<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('');

The code snippet above fails as applid is undefined in the current scope, i.e. the change event handler. In your case, you have suppressed all errors by adding the try..catch block, due to which there's no error in the js console.

Your change event handler should look something like this:

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