如何检查表单中的字段是否已填写
How to check if a field from a form is filled?
所以我试图找出一种方法来空白字段,如果一个特定的字段被输入,反之亦然。
表单根据用户输入的条目定位紧急护理位置。所以我们有紧急护理机构的名称,城市,邮政编码和英里字段。
所以我想做的是,如果用户在邮政编码字段中输入邮政编码,并且如果用户之前根据给定的选择选择了一个城市,则将该城市清空,反之亦然。如果用户从城市下拉列表中选择一个城市,则邮政编码字段空白。
下面是我的代码:
$('#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>
在.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>
相关文章:
- 如何使用JQuery检查输入(电子邮件)字段是否包含特殊字符
- 检查以上表格字段是否正确填写
- Jquery验证字段是否包含逗号
- jQuery - 检查输入字段是否保持不变
- 使用 jQuery 判断文件输入字段是否为空
- 如何知道字段是否由于字段级别安全性而被屏蔽
- 验证密码字段是否为空
- 检查表行的所有输入/选择字段是否都有值
- 如何检查输入字段是否已填写和单选按钮是否已选中
- 检查输入字段是否包含某些文本
- j查询如何检查字段是否为空,如果是这样,则向另一个元素添加一个类
- 在方法中动态声明新的“类字段” - 是否是好的做法
- 检查输入字段是否为空
- jQuery 验证:验证一个字段或一对的两个字段是否为必填字段
- 使用javascript检查输入字段是否为数字和长度
- 如何检查字段是否已声明
- jquery-检查表单上的字段是否为空
- 是否有任何处理程序可以检测在没有jQuery的情况下选择字段是否有任何选项
- 使用html5和javascript检查输入字段是否为空
- 正在检查标签文本,并验证与其绑定的输入字段是否至少包含x个数量的字符