如何檢查表單中的字段是否填充？

Question

所以我想弄清楚一個方法，如果一個特定的領域進入空白字段，反之亦然。

表單根據用戶輸入的條目找到緊急護理位置。所以我們有緊急護理機構名稱，城市，郵政編碼和里程數字。

所以我想要做的是，如果用戶在郵政編碼字段中輸入郵政編碼，並且用戶以前根據給定的選擇選擇了一個城市，則它將空白城市，反之亦然。如果用戶從城市下拉列表中選擇一個城市，則郵政編碼字段將變爲空白。

以下是我的代碼：

$('#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 1

你在你的.on()電話input後有代碼0x5396c有不可見字符。當我刪除它時，代碼有效。

$('#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>