I have select with options and I have many inputs. I need to span ready input if I select in option for example "USER" and hide it again if select another option.
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
$( "#selectlist" ).change(function(event) {
if (this.value == 1 || this.value == 2) {
$(".form-control").show();
} else {
$(".form-control").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
I would use a custom attribute called valueTie. When you update the select, your content will automatically update accordingly. What's nice is all you have to do is add another option and another div with the attribute valueTie and you're up and running with another option.
$("#selectlist").change(function () {
$("[valueTie]").hide()
$("[valueTie='" + $(this).val() + "']").show();
});
$("#selectlist").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading">
Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12" valueTie="1">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div class="col-xs-12" valueTie="2">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
Related
The question may sound complicated but all I just wanna do is to make the maximum number allowed to input in the damaged less than to the number that is being inputted in the quantity. I need to make the input of the other input field is based on the input on another input field.
Here is my code for the input form:
`
<div id="addtransaction" class="col-12" style="display:none">
<div class="card overflow-auto">
<div class="card-body ">
<div class="row">
<h5 class="add-title text-center">Add Transaction</h5>
<form method="POST" action="inv-add.php" id="form1" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-3">
<label for="customer" class="text-black"><strong>Customer</strong></label>
<input class="form-control" type="text" name="customer" maxlength="10" required >
</div>
<div class="col-md-3">
<label for="transaction" class="text-black"><strong>Transaction</strong></label>
<select class="form-control" name="transaction" required>
<option value="" disabled selected>Choose a transaction</option>
<option value="1">Regular</option>
<option value="2">Refill</option>
</select>
</div>
<div class="col-md-3">
<label for="item" class="text-black"><strong>Item</strong></label>
<select class="form-control" name="item" required>
<option value="" disabled selected>Choose an item</option>
<option value="0">Slim</option>
<option value="1">Round</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="quantity" class="text-black"><strong>Quantity</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="quantity" required>
</div>
<div class="col-md-3">
<label for="price" class="text-black"><strong>Price per galon</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="4" name="price" placeholder="₱ 0.00" required >
</div>
<div class="col-md-3">
<label for="returns" class="text-black"><strong>Gallons returned</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="returns">
</div>
<div class="col-md-2">
<label for="damaged" class="text-black"><strong>Damaged</strong> </label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="damaged">
</div>
</div>
<div style="padding-top: 10px; display: flex; align-items: flex-end;">
<button type="submit" name="add" id="add" class="btn btn-primary add">Confirm</button>
</div>
</form>
</div>
</div>
</div>
`
You can use the setAttribute() method in order to modify the maximum number allowed in you imput.
element.setAttribute(attributeName, attributeValue)
And call this method each time the value of the other imput is modify.
I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">
I have a form and it includes an input file for uploading photos. What I want is to disable the button until input file has no value. I also have other validations that make the button disabled.
My html file is like this
<form name="form" novalidate ng-submit="submitForm();">
<input class="btn btn-primary" type="file" accept="image/*" name="File" id="File" style=" margin-left:5px; width: 100%;">
<div class="form-group">
<label class="text-left control-label">Categories: </label>
<select class="col-xs-5 pull-right" ng-model="cat" name="cat" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Cat" value="{{item.categories_id}}">{{item.categories_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">Types: </label>
<select class="col-xs-5 pull-right" ng-model="type" name="type">
<option value="">---Please select---</option>
<option ng-repeat="item in Types" value="{{item.type_id}}">{{item.type_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-leftcontrol-label">Gender: </label>
<select class="col-xs-5 pull-right" name="category" id="category" ng-model="gender">
<option value="">---Please select---</option>
<option value="0">Female</option>
<option value="1">Male</option>
<option value="2">Both</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">*Texture: </label>
<select class="col-xs-5 pull-right" ng-model="texture" name="texture" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Texture" value="{{item.textures_id}}">{{item.textures_name}}</option>
</select>
</div>
<br/>
</div>
<div class="col-xs-5">
<div class="form-group">
<label class="col-md-5 control-label">*Name: </label>
<div class="col-md-7">
<input type="text" class="pull-right input-group inline form-control" ng-model="name" name="name" id="Name" ng-required="true" required>
</div>
</div>
<br/><br/><br/>
</form>
and my button is like this
<button name="submit" type="submit" id="submitsave" class="btn btn-primary" ng-disabled="form.texture.$invalid || form.cat.$invalid || form.type.$invalid " type="button" type="button" style="margin-right:1%; width:10%; height:10%">Finish</button>
It is very easy way to do. Check this out.
angular.module('app', []).controller('mainCtr', function($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-controller="mainCtr">
<form name="mainform">
<input type="text" ng-model="name" required />
<input type="submit" value="Save" ng-disabled="mainform.$invalid" />
</form>
</body>
I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.
Updated with full code:
now not working here also there are two pro div should be close on No and open on YES
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}
}
$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.
Also be careful with this
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
$('.pro').show();
}else{
$('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
your question isn't really clear but if you want ide form when you click no you can process like that e.g:
var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');
$chkNo.on('click',function(){
$proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
$proform.css('display','block') // or you can play with visibility property
});
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>
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>