Roberto Flores Roberto Flores - 3 months ago 5
CSS Question

How to check if a field from a form is filled?

So I am trying to figure out a way to blank a field if a particular field is entered and vice versa.

The form locates urgent care locations base on the entries that the users enters. So we have the urgent care facility name, city, zip code and miles field.

So what I would like to do is if the user enters the zip code in the zip code field and if the user previously had selected a city based on the selection given, it blanks out the city and vice versa. If the user selects a city from the city drop down list, the zip code field blanks out.

The following is the code I have:



$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->

<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->

<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<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>--->

<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</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

You have an invisible character with code 0x5396c after input in your .on() calls. When I remove that, the code works.

$('#zip').on('input', function() {
  $('#city').val("")
})
$('#city').on('input', function() {
  $('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
      </div>
      <!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->

      <div class="form-group">
        <!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
            <option disabled="disabled" selected="selected" value="">City</option> </select>--->

        <SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
          <option disabled="disabled" selected="selected" value="">City</option>
          <cfoutput query="UCarecityFind">
            <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>--->

              <select class="form-control" name="distance" ng-model="searchParam.distance">
                <option selected="selected" value=" "></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
              </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>

Comments