Clear text field

Question

Problem: Hello, I would like to be able to clear a field when a value is entered.

The following is the form:

Currently, when the user selects a city. If there is value in the zip code field, the zip code field value will be removed and vice versa. However, when I try to apply the same logic for the same Hospital Name field, instead of leaving the value blank, the value remains there.

The following is what I have done when the user enters a zip code, the city drop down will be blanked and vice versa:

$(document).ready(function(){
    $('#zip').on("change",function(){
        $('#city option[value=""]').prop('selected',true).trigger('input');
        /*console.log('input');*/
   });

    $('#city').on("change",function(){
       $('#zip').val('').trigger('input');
       /*console.log('change');*/
    });
});

and works fine.

However, I tried to use the same logic to be applied when a user enters a name of a hospital followed by the city. It does remove the city dropdown but not the hospital name field. When I enter a Hospital Name and enter a city, the zip code field will not be blank but remains:

 $(document).ready(function(){
        $('#zip').on("change",function(){
            $('#city option[value=""]').prop('selected',true).trigger('input');
            /*console.log('input');*/
       });

        $('#city').on("change",function(){
           $('#zip').val('').trigger('input');
           /*console.log('change');*/
        });
    });
$(document).ready(function(){
        $('#zip').on("change",function(){
            $('#hospital option[value=""]').prop('selected',true).trigger('input');
            /*console.log('input');*/
       });

        $('#hospital').on("change",function(){
           $('#zip').val('').trigger('input');
           /*console.log('change');*/
        });
    });

Here is the form I am using:

    <cfset name_list1 = "Hosp">   
<cfset name_list2 = "MMG,MG,RG">    
<cfquery name="HospCityFind" datasource="Source">
    SELECT Distinct officecity FROM UrgHosp
    where utilizedspecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">)
    and Company in (<cfqueryparam value="#name_list2#" list="true" cfsqltype="cf_sql_varchar">)  
    order by officecity
    </cfquery>

  <div class="panel panel-default">
    <div class="panel-body">
        <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
            <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>

            <div class="form-group">
            <select class="form-control" id="city" ng-model="searchParam.City">
            <option disabled="disabled" selected="selected" value="">City</option>  
            <option value=""></option>
                          <cfoutput query="HospCityFind">
                          <option value=#officecity#>#officecity#</option>
                        </cfoutput> 
                      </select></div>

            <hr />
            <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

            <div class="row">
                <div class="col-xs-7 no-right-padding">
                    <div class="form-group">
                        <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>

                            <div class="input-group-addon">miles</div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-5 no-left-padding widthZip">
                    <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
                </div>
            </div>

            <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
        </form>
    </div>
</div>

Answer 1

The hospital field is a text field, but you are trying to clear it the way you cleared the drop down field. Updated:

$(document).ready(function(){
    var $zip = $('#zip');
    var $city = $('#city');
    var $hospital = $('#hospital');

    $zip.on("change",function(){
        $('#city option[value=""]').prop('selected',true).trigger('input');
        $hospital.val('').trigger('input');
    });

    $city.on("change",function(){
        $zip.val('').trigger('input');
    });

    $hospital.on("change",function(){
        $zip.val('').trigger('input');
    });
});

I haven't checked this actually runs, but you get the idea.

Other changes I made:

• Only one $(document).ready() is ideal.
• jQuery is expensive, so I saved jQuery objects to variables and called the variables when possible.
• Consolidated both zip changes into the same function.

Answer 2

I was able to resolve my own problem. Just tried to get fancy with the code instead of just going the simple approach. I did the following to resolve my problem:

$(document).ready(function(){
    $('#zip').on("change",function(){
        $('#city option[value=""]').prop('selected',true).trigger('input');
        /*console.log('input');*/
   });

    $('#city').on("change",function(){
       $('#zip').val('').trigger('input');
       /*console.log('change');*/
    });

    $('#hospital').on("change",function(){
       $('#zip').val('').trigger('input');
       /*console.log('change');*/
    });
    $('#zip').on("change",function(){
       $('#hospital').val('').trigger('input');
       /*console.log('change');*/
    });
});