如何检查表单中的字段是否已填写？

Question

所以我试图想办法在输入特定字段时将字段空白，反之亦然。

表单根据用户输入的条目定位紧急护理位置。因此，我们有紧急护理设施名称，城市，邮政编码和里程字段。

所以我想要做的是，如果用户在邮政编码字段中输入邮政编码，并且如果用户先前根据给出的选择选择了城市，则会将城市空白，反之亦然。如果用户从城市下拉列表中选择城市，则邮政编码字段将消隐。

以下是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在0x5396c来电中input之后，您有一个隐藏字符代码.on()。当我删除它时，代码可以工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;