2016-08-15 11 views
-2

フィールドを空白にする方法を特定しようとしていますが、その逆もあります。フォームのフィールドに値が入力されているかどうかを確認する方法は?

このフォームは、ユーザーが入力するエントリに基づいて、緊急ケアの場所を特定します。だから我々は、緊急ケア施設名、都市、郵便番号とマイルフィールドがあります。

私がしたいのは、ユーザーが郵便番号フィールドに郵便番号を入力し、指定された選択に基づいて以前に都市を選択していた場合、都市が空白になり、逆も同様です。ユーザが都市のドロップダウンリストから都市を選択すると、郵便番号フィールドは空白になります。あなたの.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>

+0

'$( '#ジッパー')。( '入力'、関数(){$( '#市')。ヴァル( "")})' – adeneo

+0

@adeneoオン私はjqueryを初めて使用していて、あなたの関数がどう機能するかを気にしてほしいです。 –

+0

@RobertoFlores 'input'イベントは、ユーザーが何かを入力フィールドに入力すると実行されます。したがって、 'zip'フィールドに値を入力すると、その関数が実行され、' city'フィールドの値が空になります。逆方向についても同じことをします。 – Barmar

答えて

1

次は私が持っているコードです。それを削除すると、コードが機能します。

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

+0

どのように隠し文字を削除しましたか? –

+0

Stack Overflowエディタで削除しました。 – Barmar

+0

引用符にカーソルを合わせ、Backspaceキーを押しました。 – Barmar

関連する問題