Removing css class on .focusout

Removing css class on .focusout - javascript

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");

Related

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>

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>

Reload the bootstrap3 modal with dynamic data

I have a modal which initially has two <div> elements inside. But users can dynamically add additional <div> elements also.
What I want to do is to show only the default two <div>s each time modal is closed and reopened.
I tried the following:
$('#modal').on('show.bs.modal', function () {
$(this).removeData('bs.modal');
});
It did not help.
How can I do this?
Initial modal body:
<div class="modal-body">
<div class="row" id="leg-1">
<div class="col-md-5" id="pickup-info-1">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">1</p>
</div>
<div class="col-md-11">
<p><span id="pickup-name-1"></span> <br/> <span id="pickup-address-1"></span> <br/> <strong><span id="pickup-city-1"></span>, <span id="pickup-state-1"></span> <span id="pickup-zip-1"></span></strong> <br/> Contact: <span id="pickup-contact-1"></span><br/> Phone: <span id="pickup-phone-1"></span></p>
<p id="pickup-date-1"></p>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-1">
<div class="row">
<div class="col-md-10">
<form class="split-location-form">
<div class="form-group">
<input type="text" class="form-control" id="delivery-name-1" placeholder="Name" value="BusinessName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-contact-1" placeholder="Contact" value="ContactName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-phone-1" placeholder="Phone" value="+99893497989">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-address-1" placeholder="Address" value="ContactAddress">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="delivery-city-1" placeholder="City" value="ContactCity">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control split-location__state" id="delivery-state-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</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="FM">Federated States Of Micronesia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</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="MH">Marshall Islands</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="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PW">Palau</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</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="VI">Virgin Islands</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-md-3">
<div class="form-group">
<input type="number" class="form-control split-location__zip" id="delivery-zip-1" placeholder="ZIP" value="100189">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" class="form-control" id="delivery-date-1" placeholder="Delivery date" value="2016-10-10">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="split-location-form__price">Price:</label>
<input type="number" id="delivery-price-1" class="form-control split-location-form__price" value="600">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-sm split-location__delete-leg-btn" title="Delete this leg" data-id="1" id="delete-btn-1">Delete</button>
</div>
</div>
</div>
</div>
<hr/>
<div class="row" id="leg-2">
<div class="col-md-5" id="pickup-info-2">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">2</p>
</div>
<div class="col-md-11" id="pickup-info-exists-2">
<p><span id="pickup-name-2"></span> <br/> <span id="pickup-address-2"></span> <br/> <strong><span id="pickup-city-2"></span>, <span id="pickup-state-2"></span> <span id="pickup-zip-2"></span></strong> <br/> Contact: <span id="pickup-contact-2"></span><br/> Phone: <span id="pickup-phone-2"></span></p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
<div class="col-md-11" id="no-pickup-info-2">
<p class="text-muted">Pickup information is <br/> not available yet</p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-2">
<div class="row">
<div class="col-md-10">
<p><span id="delivery-name-2"></span><br/><span id="delivery-address-2"></span> <br/> <span id="delivery-city-2"></span>, <span id="delivery-state-2"></span> <span id="delivery-zip-2"></span><br/> Contact: <span id="delivery-contact-2"></span><br/> Phone: <span id="delivery-phone-2"></span></p>
<div class="form-group">
<p>
<span style="margin-right: 30px" id="delivery-date-2"></span> Price:
<input type="number" class="form-control split-location-form__price" id="delivery-price-2">
</p>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<button type="button" id="add-leg-btn" class="btn btn-success split-location__add-leg-btn">Add New Leg</button>
</div>
</div>
</div>
Basically, it has three main parts:
<div class="row" id="leg-1">
....
</div>
<hr>
<div class="row" id="leg-2">
....
</div>
<button>Add Leg</button>
The first two divs are initial defaults. When a user presses a Add Leg button, another div with id leg-3 (and so on.) is inserted into the template.

Add a class to the added <div>, ie. '.addedDivClass',
Then use jQuery .remove() to remove the elements when you show the modal.
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove them
$('.addedDivClass', this).remove();
});
Read more about remove() here.

try the following:
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove all except the first 2
$('div[id^="leg"]').not('#leg-1,#leg-2').remove();
});
demo: https://jsfiddle.net/hmf2v4bj/

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']");

We Keep Coding

JavaScript is the programming language of the Web.

Removing css class on .focusout - javascript

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");

Related

Remove closest dynamic element within the same row using jquery

Clear results on form

Reload the bootstrap3 modal with dynamic data

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

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

Categories

Resources