Remove closest dynamic element within the same row using jquery - javascript

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>

Related

Dynamic form select input Calculations not working properly with div

there is some select input wrapped inside div that is controlled by options and also there is data-value in those select options.
the hide and show divs are working perfectly, but there is very weird issue that is when i select first option, it shows calculation of all the select option. but when i remove all the div around of select input then it works perfectly as i want.
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div id="totalcost"></div>
when we remove div of select fields, it works as i want. but i want it like above example because there are other fields to show also.
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div class="row visitor" id="person3" style="display: none;">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<select name="person[5][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div id="totalcost"></div>
whats wrong with the first code snippet. why divs are causing this issue?

Instead of looking for css display, just use $(element).is(':visible') like so
$('body').on('change', '#visitorcount', function() {
var val = $('#country1').val();
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$(`#person${i}`).show();
//Check to see if this is visible, if not
//Set the default value and show it.
if(!$(`#country${i}`).is(':visible')){
$(`#country${i}`).val(val).show();
}
} else {
$(`#person${i}`).hide();
$(`#country${i}`).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).is(':visible')) {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div id="totalcost"></div>

Comboboxes do not select given value using Javascript

I have 2 comboboxes and I want to select a specific item by specifying a value using JS but they don't seem to work.
these are the Comboboxes:
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
this is the code to select the item in the Combobox:
<script type="text/javascript">
window.onload = function() {
document.getElementById('Exonerado').value =1;
document.getElementById('Estado').value =1;
}
</script>

Chrome seems to do exactly what you wanted. But I suspect that the real problem here is that you pass a Number and not a String.
If you wrap them in quotes like in the following code snippet, it works like a charm.
window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "0";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>

window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "1";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
Now this will help you out from your query

There is no problem in the code so far, it should work without any problem.

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

Clear results on form

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>

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