We Keep Coding

How to have no validation when selecting a value on dropdown

On this form to create a link when I select another committee type the form validates for all of the blank fields that are required. I am trying to figure out a way so those fields don't validate when I select another committee type in the dropdown. Currently when I debug it doesn't get to the post action method in the controller for obvious reasons that the form validates before even getting into the controller.
If you need to see more code like the action method in controller or view model I can provide that as well.
View
<div class="form-group col-md-8">
<div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-
summary"></div>
</div>
<input id="link-id" asp-for="#Model.LinkId" type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
<div class="form-group">
#{
var authorizedCommitteeTypes = await Model.CommitteeType
.ToSelectListAsync(AuthorizationService, User, AuthRequirements.AdminCommitteeType);
if (authorizedCommitteeTypes.Count == 1)
{
<input id="committeeType" name="committeeType" type="hidden"
value="#authorizedCommitteeTypes.FirstOrDefault()?.Value" />
}
else
{
<label class="control-label">Committee Type</label>
<select id="add-edit-committee-type"
name="committeeType"
asp-for="#Model.CommitteeType"
asp-items="#authorizedCommitteeTypes"
class="form-control">
</select>
}
}
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Category</label>
#{
if (Model != null && Model.AvailableCategories != null)
{
var availableCategories =
new SelectList(
Model.AvailableCategories.OrderBy(c => c.Order),
dataValueField: "CategoryId",
dataTextField: "Title",
selectedValue: Model.CategoryId);
<select id="dropdown-linkCategories" required
asp-for="#Model.CategoryId"
asp-items="#availableCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
else
{
<select id="dropdown-linkCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
}
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Title</label>
<input id="title" asp-for="Title" name="Title" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Display Order</label>
<div>
<input id="order" asp-for="Order" name="Order" class="form-control" />
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">URL</label>
<input id="url" asp-for="URL" name="URL" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-12">
<label class="control-label">Description</label>
<textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
data-val-maxlength-max="200" asp-for="Description"
data-val-maxlength="Max length for Description is 200"></textarea>
</div>
#{
if (Model.LinkId == 0)
{
<div class="form-group col-md-12">
<input type="submit" id="link-submit"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2"
value="Add" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
</div>
}
else
{
<div class="form-group col-md-8 col-lg-12">
<input type="submit" value="Save" id="edit-submit"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
</div>
}
}
JS
$(document).on("change", "#form-create-link #add-edit-committee-type", function () {
$('input[name="FetchCategories"]').val(true);
$(this).closest('form').submit()
});

Unable to delete form form inline formset in django

I have a inline formset called WorkExperienceFormset. I am generating form clicking a button. But I am unable to delete the forms. When I click button nothing is happening.
forms.py:
WorkExperienceFormset = inlineformset_factory(Employee, WorkExperience, extra=0, min_num=1,
fields = [
'previous_company_name',
'job_designation',
'from_date',
'to_date',
'job_description',
],
widgets = {
'previous_company_name': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
'job_designation': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
'from_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal3'}, format='%m/%d/%Y'),
'to_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal4'}, format='%m/%d/%Y'),
'job_description': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
},
can_delete = True,
can_order = True,
)
template.html:
<div class="work-formset">
{% for work_form in work_formset %}
<div class="work-form">
<div class="item form-group">
<label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Previous Company Name</label>
<div class="col-md-4 col-sm-4 col-xs-12">
<!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
{{ work_form.previous_company_name }}
</div>
</div>
<div class="item form-group">
<label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Designation</label>
<div class="col-md-4 col-sm-4 col-xs-12">
<!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
{{ work_form.job_designation }}
</div>
</div>
<div class="item form-group">
<label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Details</label>
<div class="col-md-4 col-sm-4 col-xs-12">
<!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
{{ work_form.job_description }}
</div>
</div>
<div class="item form-group">
<label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">From Date</label>
<div class="col-md-2 col-sm-2 col-xs-12">
<!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
<div class="form-group has-feedback">
{{ work_form.from_date }}
<span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="item form-group">
<label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">To Date</label>
<div class="col-md-2 col-sm-2 col-xs-12">
<!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
<div class="form-group has-feedback">
{{ work_form.to_date }}
<span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="work-form-divider" id="">
</div>
</div>
{% endfor %}
</div>
script:
function cloneForm(selector, prefix) {
var newElement = $(selector).clone(true);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
var currentFormIndex = total;
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
});
total++;
$('#id_' + prefix + '-TOTAL_FORMS').val(total);
var solidLn = '<div class="ln_solid"></div>';
var deleteBtnId = prefix + '-' + currentFormIndex + '-btn';
deleteBtn = `<button type="button" value="remove" id="${deleteBtnId}" onClick="deleteForm('${deleteBtnId}', '${prefix}')"><i class="fa fa-minus" aria-hidden="true"></i></button>`
//deleteBtn = `<a type="button" value="remove" id=${deleteBtnId} onClick='deleteForm("delete", "prefix")'><i class="fa fa-minus" aria-hidden="true"></i></a>`
$(selector).after(newElement);
$(newElement).prepend(deleteBtn);
$(newElement).prepend(solidLn);
}
function deleteForm(btn, prefix) {
console.log(btn, prefix);
$(btn).parents('.work-form').remove('.work-form');
console.log("Button: " + $(btn).parents('.work-form'));
}
cloneForm() is working. But deleteForm() is not working. From the console.log I can see that deleteForm() is called when I press delete the button. Somehow .remove() is not working.
How can I solve this problem?

As it seems for this line $(btn).parents('.work-form').remove('.work-form');
.parents() -> The parents() method returns all ancestor elements of the selected element.
.remove() -> Remove the set of matched elements from the DOM.
Since remove() is the filter for the object in question, in this case, the object in question is just the single element with the id .work-form, therefore not containing any .work-form elements. Make sure to check your DOM and find that you have work-form elements present as a child.
You can simply solve this by using an unique identifier for the form in question instead of using the work-form
element.

How to toggle a class of an input if it's not empty with jQuery?

Using Bootstrap 4.
I have four text inputs, if any of the text inputs contain any values, i'd like to add a class to a button.
When the button is clicked, I would like to clear the input values, and remove the class from the button.
I have half of it working (clicking button successfully clears all inputs).
My code is below;
$(document).ready(function() {
$("#filterRecords input").on("keyup change", function() {
$("#filterRecords input").each(function() {
var element = $(this);
if (element.val().length > 0) {
$('#resetFilter').addClass('btn-outline-primary');
}
});
});
$('#resetFilter').click(function() {
$('input[type=text]').val('').change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
<div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
<input type="text" id="searchName" class="form-control" placeholder="Search Name">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="searchLang" class="form-control" placeholder="Search Language">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-auto">
<button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
<hr>
</div>
</div>
Fiddle link.
Any help would be appreciated.

Firstly, filterRecords is a class, not an id, so your selector is incorrect.
Aside from that, the issue with your logic is that it only ever add the class when the input values change. You also need to have some logic to remove it when no input has a value entered.
You can do that by using toggleClass() along with a boolean based on the number of filled inputs, like this:
$(document).ready(function() {
var $inputs = $(".filterRecords input");
$inputs.on("input", function() {
var $filled = $inputs.filter(function() { return this.value.trim().length > 0; });
$('#resetFilter').toggleClass('btn-outline-primary', $filled.length > 0);
});
$('#resetFilter').click(function() {
$inputs.val('').trigger('input');
});
});
.btn-outline-primary {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
<div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
<input type="text" id="searchName" class="form-control" placeholder="Search Name">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="searchLang" class="form-control" placeholder="Search Language">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
</div>
<div class="input-group col-sm-6 col-md-3 mb-3">
<input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-auto">
<button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
<hr>
</div>
</div>
Also note the use of input over the combination of keyup change.

Like this
$(document).ready(function() {
$("#filterRecords input").on("keyup change", function() {
$("#filterRecords input").each(function() {
var element = $(this);
if (element.val().length > 0) {
$('#resetFilter').addClass('btn-outline-primary');
}
});
});
$('#resetFilter').click(function() {
$("#filterRecords**")[0].reset();
$(this).removeClass('btn-outline-primary');
});
});

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