We Keep Coding

Remove a class on selection and add class to others

Very much new to JS and so far I did get what I needed but its a chaos.
I have three classes aer, bsa and sf who have their own div space and by default, they have Bootstrap 4's d-none (display none) class. Now when aer is selected from a drop-down list d-none should be removed and bsa and sf shouldn't change (because they already have d-none in them). Then when I select bsa, d-none should be removed and aer should have d-none, and for bsa nothing should happen. Same goes to sf.
I was able to get this done by the following JQuery:
const aer = $('.aer');
const bsa = $('.bsa');
const sf = $('.sf');
// Encoding algorithm
$('select[id=id_encoding_algorithm_name]').change(function () {
console.log($(this).val());
switch ($(this).val()) {
case "AER":
if(aer.hasClass('d-none')) {
aer.each(function () {
$(this).removeClass('d-none');
});
}
if (!bsa.hasClass('d-none')) {
bsa.each(function () {
$(this).addClass('d-none');
});
}
if (!sf.hasClass('d-none')) {
sf.each(function () {
$(this).addClass('d-none');
});
}
break;
case "BSA":
if(bsa.hasClass('d-none')) {
bsa.each(function () {
$(this).removeClass('d-none');
});
}
if (!aer.hasClass('d-none')) {
aer.each(function () {
$(this).addClass('d-none');
});
}
if (!sf.hasClass('d-none')) {
sf.each(function () {
$(this).addClass('d-none');
});
}
break;
case "SF":
if(sf.hasClass('d-none')) {
sf.each(function () {
$(this).removeClass('d-none');
});
}
if (!aer.hasClass('d-none')) {
aer.each(function () {
$(this).addClass('d-none');
});
}
if (!bsa.hasClass('d-none')) {
bsa.each(function () {
$(this).addClass('d-none');
});
}
break;
}
});
This is too much of code for toggling a class (I guess), is there a better way to do it?
Update 1:
HTML Code (only div code):
<div class="pt-4">
<div class="card">
<div class="card-header">
Encoding Algorithm
</div>
<div class="card-body">
<div class="form-group row">
<label for="Encoding Algorithm Name" class="col-sm-2 col-form-label align-self-center">Encoding
Algorithm Name</label>
<div class="col-sm-9 align-self-center">
<select name="encoding_algorithm_name" class="form-control" id="id_encoding_algorithm_name">
<option value="AER" selected>Address Event Representation</option>
<option value="BSA">Ben's Spiker Algorithm</option>
<option value="SF">Step Forward Algorithm</option>
</select>
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div class="form-group row aer d-none">
<label for="Aer Spike Threshold Value" class="col-sm-2 col-form-label align-self-center">Aer
Spike Threshold Value</label>
<div class="col-sm-9 align-self-center">
<input type="text" name="aer_spike_threshold_value" value="0.5" class="form-control" required id="id_aer_spike_threshold_value">
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div class="form-group row bsa d-none">
<label for="Num Filters" class="col-sm-2 col-form-label align-self-center">Num
Filters</label>
<div class="col-sm-9 align-self-center">
<input type="number" name="num_filters" value="1" class="form-control" required id="id_num_filters">
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div class="form-group row bsa d-none">
<label for="Threshold Vec" class="col-sm-2 col-form-label align-self-center">Threshold
Vec</label>
<div class="col-sm-9 align-self-center">
<input type="text" name="threshold_vec" value="0.9" class="form-control" required id="id_threshold_vec">
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div class="form-group row bsa d-none">
<label for="Filter Order Vec" class="col-sm-2 col-form-label align-self-center">Filter
Order Vec</label>
<div class="col-sm-9 align-self-center">
<input type="text" name="filter_order_vec" value="24" class="form-control" required id="id_filter_order_vec">
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
<div class="form-group row bsa d-none">
<label for="Filter Cutoff Vec" class="col-sm-2 col-form-label align-self-center">Filter
Cutoff Vec</label>
<div class="col-sm-9 align-self-center">
<input type="text" name="filter_cutoff_vec" value="0.1255" class="form-control" required id="id_filter_cutoff_vec">
</div>
<div class="col-sm-1 align-self-center">
<i class="fas fa-info-circle"></i>
</div>
</div>
</div>
</div>
</div>

Your code can be further simplified.
You can execute the removeClass method on the whole selection at once.
Remove a single class, multiple classes, or all classes from each
element in the set of matched elements.
You really don't have to check if a selection has a class in order to remove it.
So, the code can be simplified as:
case "AER":
aer.removeClass('d-none');
bsa.addClass('d-none');
sf.addClass('d-none');
Same applies to other cases too.

Why so much of conditions?
You can simply do it by
$('select[id=id_encoding_algorithm_name]').change(function () {
console.log($(this).val());
$(aer, bsa, sf).addClass('d-none');
switch ($(this).val()) {
case "AER":
aer.removeClass('d-none');
break;
case "BSA":
bsa.removeClass('d-none');
break;
case "SF":
sf.removeClass('d-none');
break;
}
});
or if you can change values to aer, bsa, sf instead of AER, BSA it will simply become
$('select[id=id_encoding_algorithm_name]').change(function () {
console.log($(this).val());
$(aer, bsa, sf).addClass('d-none');
$("." + $(this).val()).removeClass('d-none');
});

You could use toggleClass() as well in jQuery.
aer.toggleClass('d-none')

Do check the below jsFiddle:
https://jsfiddle.net/ulric_469/tyf5epk2/11/
JScode:
$('select[id=id_encoding_algorithm_name]').change(function () {
$(".common-class").addClass('d-none');
let currentClass = $(this).val();
currentClass = currentClass && currentClass.toLowerCase();
$("."+currentClass).removeClass('d-none');
});
I have added one common class to html you can check the same in JSfiddle

I would advice you to use jQuery#toggleClass method with condition to get more control against your code:
const divs = $('.aer, .bsa, .sf');
// Encoding algorithm
$('select#id_encoding_algorithm_name').change(function () {
const value = $(this).val().toLowerCase();
divs.each(function(index, el){
$(el).toggleClass('d-none', !$(el).hasClass(value))
});
});

Some input boxes are not cleared on the second click Angularjs

Dears, I made a javascript function when checkbox is checked to enable some controllers and when unchecked disable the same controllers and clear their data, it works fine in the first click only, which means if I check the checkbox and select data, then unchecked the checkbox it clear data from input boxes and hide the datetimepicker. BUT if check the checkbox for the second time and select data, then unchecked the checkbox, it does not clear data but hide the time picker.
HTML
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-bottom-10 padding-none">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<div class="form-check margin-top-30">
<label>
<input ng-model="attend" type="checkbox" name="check" ng-change="checkattendance()"> <span class="label-text">Attendance Time</span>
</label>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">Operator<span class="danger">*</span></label>
</div>
<div class="col-xs-12">
<select ng-disabled="!attend" ng-show="lang==0" class="form-control input-sm" ng-model="opinname" ng-options="o.opid as o.openm for o in Operator"></select>
<select ng-disabled="!attend" ng-show="lang==1" class="form-control input-sm" ng-model="opinname" ng-options="o.opid as o.opanm for o in Operator"></select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">From <span class="danger">*</span></label>
</div>
<div class="col-xs-12 date">
<div id="timeform1" class="input-append date">
<input data-format="hh:mm:ss" type="text" class="form-control" ng-disabled="!attend" ng-model="from2">
<span class="add-on" >
<i data-time-icon="icon-time"id="icon1" data-date-icon="icon-calendar" ng-show="attend">
</i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">To <span class="danger">*</span></label>
</div>
<div class="col-xs-12 date">
<div id="timeto1" class="input-append date">
<input data-format="hh:mm:ss" type="text" class="form-control" ng-disabled="!attend" ng-model="to2">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar" ng-show="attend">
</i>
</span>
</div>
</div>
</div>
</div>
Angular js
$scope.checkattendance = function () {
if ($scope.attend == true) {
$('#timeform1').datetimepicker({
pickTime: true, pickDate: false
});
$('#timeto1').datetimepicker({
pickTime: true, pickDate: false
});
}
else {
$scope.opinname = '';
$scope.from2 = '';
$scope.to2 = '';
$scope.apply();
}
}
why ng-model=from2 and ng-model=to2 are not binded and clear the data
any help , thanks in advance

One problem is that your current checkattendance function is not changing the attend boolean, it needs to toggle the state from true to false or false to true each time the checkbox is changed, one easy modification is to modify the function and add $scope.attend =!$scope.attend; either at the start or the end of the function. Something like below:
$scope.checkattendance = function () {
$scope.attend =!$scope.attend;
if ($scope.attend == true) {
$('#timeform1').datetimepicker({
pickTime: true, pickDate: false
});
$('#timeto1').datetimepicker({
pickTime: true, pickDate: false
});
}
else {
$scope.opinname = '';
$scope.from2 = '';
$scope.to2 = '';
$scope.apply();
}
}
You should also tie the checkbox's selected state to that boolean something like checked=attend

AngularJS - add a checkbox to a widget

How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?

How to add form with in another form using AJAX? But remember first form is also added with AJAX

I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.
This is the parent page.
<div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Are you a?</label>
</div>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="studentstatus" value="fresh">Freshman</label>
<label class="radio-inline mg-top-5">
<input type="radio" name="studentstatus" value="compart">Reappeared</label>
</div>
</div>
<div id="adddata"></div>`
JQuery to working with AJAX is the following for adding First form:
$(function () {
$('#studentstatus input:radio').change(
function () {
var index = this.value;
$.get(
"add_freshman_form_in_maprevios.php", {
studentstatus: index
},
function (data) {
$("#adddata").html(data);
}
);
}
);
});
add_freshman_form_in_maprevios.php page HTML code is:
$output='<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Roll No.</label>
</div>
<div class="col-sm-2">
<input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-3">
<label for="" class="control-label">Write down the names of failed papers:</label>
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>
</div>
<div class="col-xs-12 text-left">
<div class="col-sm-1 hidden-xs"></div>
<button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
<div id="compartpaper"></div>
</div>';
echo $output;
It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.
$('.addanother').click(function (e) {
e.preventDefault();
$.get(
"add_compart_form_in_previous_paper.php", {
username: $("#username").val()
},
function (data) {
$("#compartpaper").append(data);
}
);
});
The Form which I want to add in this page is mean :
<?php
$output='<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>';
echo $output;
?>

You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.
$("#adddata").on("click", ".addanother", function(){
//your code
});

clone jquery input file was not clearing

With my current code I am able to clone entire div. But if the user attach any documents then the user click add more button the data are remain same on the cloned div.
This is the code I have so far below that isn't working. You can also see this on js fiddle: Link
I have try with the following code `$(".custom-file-input").closest('form').trigger('reset'); But this was resetting the original div not the clone one. Some where I am lagging kindly please help me.
var count=0;
$(document).on("click", ".attch_add_button", function () {
var $clone = $('.cloned-row4:eq(0)').clone();
$clone.find('[id]').each(function(){this.id+=''});
$clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find('.preview').hide();
$clone.wrap('<form>');
$clone.closest('form').trigger('reset');
$clone.unwrap();
$(this).parents('.medica_rpt').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row4').length;
if(len>1){
$(this).closest(".btn_less1").parents('.medica_rpt').remove();
}
});
Here is the html code
<div class="medica_rpt cloned-row4" >
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted ?</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted by</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted on</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accepft">Document Remarks</label>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
<div class="custom-file-input" id="custom-file-input">
<input type="file" class="check">
<input type="text" class="txt_field ctm_widt check" id="file_name" disabled placeholder="Attached File">
<button class="cst_select ">
<i class="fa fa-rotate-90">
</i> Attach
</button>
</div>
View
</div>
<div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="checkbox">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="text" class="smipt_Field" id="accpt_by" name="accpt_by" disabled/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="text" class="smipt_Field" id="accpt_on" name="accpt_on" disabled/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<select class="slt_Field" id="txt_dcmRem" name="txt_dcmRem">
<option value="" selected='selected'> </option>
<option value="COLR">Coloured Copy Required</option>
<option value="EXPR">Expired Document</option>
<option value="INSF">Insufficient</option>
<option value="INVD">Invalid Document</option>
<option value="LOWR">Low Resolution</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 pull-right clear">
<input type="button" class="btn_more btn_right attch_add_button"/>
<!--<button class="btn_more btn_right attch_add_button"></button>-->
</div>
</div>
</div>
Thanks in advance
Kindly help suggest me I am confused here.

If you are cloning form elements best work around for this is to reset the cloned form.
In the fiddle example there is no form at all, so, in case you are cloning some input fields but not the whole form you might need to wrap those input inside a form, reset that form, and then unwrap.
Your JS should end up similar to this:
$(document).on("click", ".attch_add_button", function () {
var $clone = $('.cloned-row4:eq(0)').clone();
$clone.find('[id]').each(function(){this.id+=''});
$clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find('#custom-file-input').val('');
$clone.wrap('<form>');
$clone.closest('form').reset();
$clone.unwrap();
$(this).parents('.medica_rpt').after($clone);
});
You might want to check slipheed's answer on THIS question