Clear results on form - javascript

I am trying to create a function where when the zip code is entered and if there are any entries in city, it clears that field in the form and shows the list of cities.
The same applies when the user enters a city based on a drop down box that contains a list of cities. Once the user selects the city, the zip code field is left blank.
With help of stackoverflow,
I was able to obtain this. However,for some reason, it only works for the zip code field. Meaning, once the field in the city is cleared, I am able to retrieve a list items based on the zip code and keep on changing the zip code. When I select a city, the field for zip code clears but no new results are displayed.
Not sure what is going on.
$('#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.0/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
<option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
</div>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option value=""></option>
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
<option disabled="disabled" selected="selected" value="">Gender</option>
<option value=""></option>
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<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"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\-]" 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>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
</div>


You can use this code :
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
Final code :
<html>
<head>
</head>
<body>
<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.0/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
<option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<select name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
</div>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option value=""></option>
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
<option disabled="disabled" selected="selected" value="">Gender</option>
<option value=""></option>
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<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"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\-]" 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>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
</div>
<script>
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
</script>
</body>
</html>

Related

Why are these cards not getting filtered and floating left?

These cards have their class updated, but they don't get filtered and float to the left.
let btnDiv = document.getElementById('filterBtnContainer');
let btns = btnDiv.querySelectorAll('.btn');
btns.forEach((btn, i) => {
let btnValue = `q${i}`;
btn.classList.add('btn', 'filter');
btn.setAttribute('type', 'submit');
btn.setAttribute('value', btnValue);
btn.addEventListener('click', () => {
filterSelection(btnValue);
});
});
//filterSelection('q0');
function filterSelection(c) {
console.log(c)
let cardContainer = document.getElementById('cardsContainer');
var x, i;
x = cardContainer.getElementsByClassName("card");
if (c == 'q0') c = "";
for (i = 0; i < x.length; i++) {
removeClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
}
}
// Show filtered elements
function addClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function removeClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
.card {
background-color: #fafafa;
font-size: 12px;
border-radius: 5px !important;
flex-basis: 25%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
outline: none;
border-radius: 7px;
flex-direction: inherit !important;
transition: all 0.3s ease-in-out;
transform: scale(1);
display: none;
}
.card:hover {
transform: scale(1.01);
}
.card-img {
width: 100%;
height: 190px;
object-fit: cover;
}
.show {
display: flex;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="filterBtnContainer">
<button class="btn filter active" type="submit" value="q0">All</button>
<button class="btn filter" type="submit" value="q1">Q1</button>
<button class="btn filter" type="submit" value="q2">Q2</button>
<button class="btn filter" type="submit" value="q3">Q3</button>
<button class="btn filter" type="submit" value="q4">Q4</button>
</div>
<div id="cardsContainer">
<div class="row crd-group">
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden=""><label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="1"></div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="2">
</div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label><select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden=""><label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="3">
</div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsumdale-az/</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;">
<label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="4">
</div>
</div>
</div>
</div>
</div>

That is because your own styles are overriden by the bootstrap styles you have included in your page.
You need to put your styles after the bootstrap ones.
In general they should have higher specificity either by more specific selectors or if they share the same specificity, they should come later in your page.
Read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_weight_categories for more details.

Remove closest dynamic element within the same row using jquery

I have multiple row which are dynamically generated i want to, there is a dropdown list i want to hide input fields next to dropdown of only row whose selection value is 2, i have tried below exampe but it is not working.
$(document.body).on('change', '.check_valid', function() {
if ($(this).children("option:selected").val() == 2) {
$(this).closest(".form-control.text_min").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>

You need to navigate much further
$(document).on('change', '.check_valid', function() {
$(this).closest(".row").next().find(".text_min").toggle(this.value!=="2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Classn</h5>
<select name="input" class="form-control show-tick check_valid" aria-invalid="false">
<option value="">Select</option>
<option value="1">Intermediate</option>
<option value="2">High School</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5 class="card-inside-title">Min</h5>
<div class="form-line focused">
<input type="text" name="min[][]" placeholder="Min" class="form-control text_min">
</div>
</div>
</div>

Removing css class on .focusout

I have a form on a web page that does a validation check before doing a post back to my server. The validation works well and applies a custom CSS class of ErrorControl to any input fields when needed.
What I want to accomplish is when a user goes to correct their mistake, they are given immediate feed back that the input is acceptable. I'm using .focusout to accomplish this.
Here is my form
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donations</h3>
</div>
<div class="panel-body">
<asp:ValidationSummary runat="server" HeaderText="There were errors on the page: " />
<asp:CompareValidator runat="server" ControlToValidate="email1" ControlToCompare="email2" ErrorMessage="Emails don't match"></asp:CompareValidator>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="firstname" ErrorMessage="First name is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="firstname">First Name</label>
<input type="text" class="form-control" runat="server" id="firstname" name="firstname" placeholder="John" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="lastname" ErrorMessage="Last name is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="lastname">Last Name</label>
<input type="text" runat="server" class="form-control" id="lastname" name="lastname" placeholder="Doe" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="address1" ErrorMessage="Address 1 is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="address1">Address 1</label>
<input type="text" class="form-control" runat="server" id="address1" name="address1" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<label class="control-label" for="address2">Address 2 (optional)</label>
<input type="text" class="form-control" runat="server" id="address2" name="address2" placeholder="Apt / Suite #" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="city" ErrorMessage="City is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="city">City</label>
<input type="text" class="form-control" runat="server" id="city" name="city" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="state" ErrorMessage="State is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="state">State</label>
<select class="form-control" runat="server" id="state" name="state">
<option value="" selected disabled>Please select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="zip" ErrorMessage="Zip code is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="city">Zip</label>
<input type="text" class="form-control" runat="server" id="zip" name="zip" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="phone" ErrorMessage="Phone number is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="">Phone #</label>
<input type="tel" class="form-control" runat="server" id="phone" name="phone" placeholder="" />
<i class="glyphicon glyphicon-earphone form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="email1" ErrorMessage="Email is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="email1">Email</label>
<input type="email" class="form-control" runat="server" id="email1" name="email1" placeholder="name#example.com" />
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="email2" ErrorMessage="Email confirmation is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="email2">Confirm Email</label>
<input type="email" class="form-control" runat="server" id="email2" name="email1" placeholder="name#example.com" />
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 cold-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="amount" ErrorMessage="Please enter a dollar amount">*</asp:RequiredFieldValidator>
<label class="control-label" for="amount">Amount</label>
<input type="number" class="form-control" runat="server" id="amount" name="amount" placeholder="$" />
<i class="glyphicon glyphicon-usd form-control-feedback"></i>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<asp:Button runat="server" CssClass="btn btn-success pull-right" OnClick="SubmitButton_Click" ID="SubmitButton" Text="Submit Form" />
</div>
</div>
As you can see, I have asp:requiredvalidator on the form and I have some javascript that gives them a custom css class when they don't validate.
The next step is to remove the class of ErrorControl immediately after the input loses focus.
I've written this javascript that meets the conditionals, but fails to actually remove the class. So I believe there is literally only 1 wrong line of code.
Here is that javascript
<script type="text/javascript">
$(".panel-body").focusout(function (e) {
var id = e.target.id;
if (id == "firstname" || id == "lastname") {
alert("First if hit");
if (e.target.value != "") {
alert("second if hit");
$(id).removeClass("ErrorControl");
}
}
});
</script>
I would be happy to put the form on JSFiddle if that would help, but obviously my asp:requiredValidator code wouldn't work.

You're calling removeClass on $(id), which evaluates to something like $("firstname"). Selecting an element by ID in JQuery requires a preceding #, so what you'd actually want is $("#firstname").
Try this instead:
$("#"+id).removeClass("ErrorControl");

Input focus doesnt work / can't select radio button - Bootstrap

I have the following html code which uses twitter bootstrap framework, where I am not able to select the input fields,its focus gets removed when I click on it and also I am not able to select a radio button.Even if I select one,it moves to the first radio button and Im not able to select the second one.Please help me resolve this issue.And the main thing is that this is happening in firefox browser and in chrome and IE its working fine!
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->

I don't see anything wrong with the code you posted, per se.
I personally prefer to wrap radio input buttons in the label tag without the for="" attribute. This makes it so clicking on the text also selects the radio button. Like so:
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
I tested your code in this jsfiddle (granted, I added my radio button change) and it seems to work. There must be something else in your code that is causing the issue. You could try posting a link to your development website.

I encountered probably same problem. Don't use "contenteditable='true'" property.
ERROR EXAMPLE:
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
In your case if it isn't "contenteditable" search for other attributes which could interfere.

I think the problem is in your question, not in the code. Radio buttons all have the same name and are treated as a group. This is why the first one is selected with a tab, then to get to individual buttons with the arrow keys. I might have misunderstood the question but I hope its useful.
g

$(this).closest(("select[name*='FIELD2']") not working

I have this form:
<div id="div_id_form-0-FIELD1" class="form-group">
<label for="id_form-0-FIELD1" class="control-label col-sm-2">
Amount Type
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD1" name="form-0-FIELD1">
<option value="">---------</option>
<option value="d" selected="selected">Dollars</option>
<option value="p">Percent of</option>
</select>
</div>
</div>
<div id="div_id_form-0-FIELD2" class="form-group">
<label for="id_form-0-FIELD2" class="control-label col-sm-2">
Deduct from total
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD2" name="form-0-FIELD2">
<option value="" selected="selected">---------</option>
<option value="g">Gross Pay</option>
<option value="n">Net Pay</option>
<option value="h">Hourly Rate</option>
</select>
</div>
</div>
I haveFIELD1 in ($this), I want to get FIELD2. This is not getting it for me:
$(this).closest(("select[name*='FIELD2']")

Use the .next() method, like so:
$(this)
.closest("div.form-group")
.next("div.form-group")
.find("select[name*='FIELD2']");

Categories