Develop Reference

Add/Remove dynamic html element on a Django Form

Trying to add logic on a Django form where a text input element should either be appended or removed, based on checkbox's click action. Append of input text works fine, but can't find a way to remove it when the checkbox is unchecked as can't find a right selector for $(this) to remove the input.
JavaScript
$(document).ready(function() {
$('input.tCheck).on('
click ',function(){
if ($(this).is(':checked')) {
$(this).closest('div').append('<div id="piiValue"><input text="text" name="+this.value+" required></div>');
} else {
$(this).closest('div').remove('#piiValue');
}
}
})
Forms.py
class tOnboardingForm(forms.Form);
t_choices = (
('Name','Name'),
('email','email'),
)
tpii = forms.MulitpleChoiceField(required=False,
widget=forms.CheckboxSelectMulitple(attrs= {'class':'tCheck'}),
choices=t_choices,)

It looks like the inserted div can be targeted directly:
$(document).ready(function() {
$('input.tCheck').on('click', function() {
let $checkbox = $(this);
if ($checkbox.is(':checked')) {
$checkbox.closest('div').append('<div id="piiValue"><input text="text" name="+this.value+" required></div>');
} else {
$('#piiValue').remove(); // <-- here
}
})
})

Disable a particular span using jQuery

I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.
To display stored events I am using a forEach loop in JSP. I have a span named ld-option-okay-edit in each div. You can edit previous data after you click on that span and save your data.
But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function.
If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
??????
THE PROBLEM
???????
My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?
Here is my code:
<c:forEach items="${relativeUser}" var="user">
<div class="elementsdiv">
<form action="<c:url value=" ******">" method="post">
<div class="cld-option-okay" >
<span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>
</div>
<div class="cld-option-name" >
<input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
</div>
</form>
</div>
</c:forEach>
What I have tried until now in jQuery is:
$(".elementsdiv").each(function (i, data) {
$($(data).find('.cld-option-okay')).hover(function (e) {
e.preventDefault();
if ($($(data).find('input[name="name"]')).val() === "") {
$($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line i am getting trouble
}
}
});
For that line I even tried:
1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );
but when I apply:
`$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying
**********************
`$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below
$('.cld-option-okay-edit').addClass('disabled');
but it disables okay span in all divs
*************************

For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});

I think this is what your code should look like based on what you have written, but I am not sure it is actually what you want to happen. If you want to disable it, you need to use prop()
$(".elementsdiv").each(function() {
var elem = $(this);
elem.find('.cld-option-okay').hover(function(e) {
if (elem.find('input[name="name"]').val() === "") {
elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
}
});
});

jquery if else button issue

hi everyone i have a issue with jquery :
in my code i have two multiple selection one on the left one on the right and a button near the selection on the right and i when a click on it the text from the right is copiedinto an input this is already done.i can add or remove element from a list to another with two button :
add and remove . hope i have been clear
when the text is copiedinto the input i can't move it anymore unless another text is copied throught the button near the selection :
here is my jquery code :
if($('#rightoption:selected').val() === $("#chosen").val())
{
$('#remove').attr('disabled' ,'disabled');
}
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
chosen is the id for the input.
but the problem is that when i select something different from the thing in the input he still disabled the button remove

This :
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
is equivalent to
else {
$('#right option:selected').val() !==$("#chosen").val(); // this does nothing
}
$('#remove').removeAttr('disabled');
You probably wanted
if($('#right option:selected').val() === $("#chosen").val()){
$('#remove').attr('disabled' ,'disabled');
} else {
$('#remove').removeAttr('disabled');
}
or better :
$('#remove').prop(
'disabled', $('#right option:selected').val() === $("#chosen").val()
);
And I suppose the first test should have '#right option:selected' (note the space).

Removing a class from all input elements

I want to remove a class from my input elements.I'm using Data Annotations in MVC and unobtrusive javascript for validation,anyway, when user clicks submit button I want to remove valid class from all input elements, because it change all unnecessary input's (non-required) valid (green border color) and it's not looking good.Anyway, I try this:
$("#submitBtn").click(function () {
if ($(".input-validation-error").length == 0) { // if there is no error
$(this).button('loading');
} else {
$("input").each(function () {
$(this).removeClass("valid");
});
}
And it didn't work, also tried:
$("input").removeClass("valid");
It didn't work either.And I thought maybe it's working before the validation and valid class adding after the click event automatically.So I try this:
setInterval(function() {
$("input").each(function() {
$(this).removeClass("valid");
});
}, 1000);
But still no success. I don't know jQuery very well, probably I'm missing something simple.What is the problem?

if the class is attached to the input element then it should be as simple as
$("input.valid").removeClass('valid')
As it turned out OP didn't want the valid highlight to be applied so setting the validClass to '' fixed it
For the page the default validClass was set using
jQuery.validator.setDefaults({ validClass: '' });

Try to wrap your code inside DOM ready:
$(document).ready(function() {
$("#submitBtn").click(function () {
if ($(".input-validation-error").length == 0) { // if there is no error
$(this).button('loading');
} else {
$("input").each(function () {
$(this).removeClass("valid");
});
}
})

Check out this fiddle:
http://jsfiddle.net/dwQb4/1/
$("input").removeClass("valid");
There are 3 inputs with class="valid" that turns them green and some jquery to remove the class
this may help you

how to disable a dropdown item after its been selected

i have a regular combobox and i am listening to the change event and sticking the selected value in an html table. this all works fine but there is one issue. Right now, the user can select the same item more than once (which i dont want to allow).
At the point of where an item is selected, i want to:
Capture the value and stick it in the table (which i am doing now and code is below)
<script type="text/javascript">
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0) {
addRowToTable(this.value);
}
});
}
And i am trying to figure how to do #2 and #3 below . .
reset the selectedindex back to 0 (which says "Please select . .")
Not allow that selection to be selected again (and any visual representation on disabling that dropdown item).

Number 1 is pretty simple:
$('#categories option:first').get(0).selectedIndex = 0;
You can also use the value of the option against the dropdown list like so:
$('#categories').val('myOptionValue');
To prevent an item from being selected a second time, I would remove it from the dropdown list with something like this:
$('#categories option[value=valueToRemove]').remove();

cballou's answer sets #rel="disabled" on the select element, which causes the "single selection allowed bug".
I would tweak it to look like the below code. Also, I'd recommend setting a class instead of using the rel attribute. That way you add styles (browser permitting) that indicate to the user that the option is disabled.
CSS:
#categories .disabled { background:#c00; }
JS:
$(document).ready(function() {
$('#categories').change(function() {
var selectedIndex = this.selectedIndex,
selection;
if ( selectedIndex !== 0 ) {
selection = $(this.options[selectedIndex]);
if( !selection.hasClass('disabled') ) {
addRowToTable(this.value);
selection.addClass('disabled');
}
}
// reset selected index
$(this).val('');
});
});

OK if i were you i wouldnt use a Drop down box for this... i would use multiple <select multiple="true"> which is going to allow you to select multiple items at a time by using ctrl+click (cmd+click on mac), then i would have an add button to click when done. this would fire the js taht would grab all the selected options put em in your table or what have you and then then remove them from the select box.
http://www.w3schools.com/TAGS/att_select_multiple.asp

You could add a rel="disabled" attribute to the option and check for it like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).attr('rel', 'disabled');
}
});
});
If your first option (selectedIndex 0) has an empty value, you can easily reset like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).find('option:selected').attr('rel', 'disabled');
}
// reset selected index
$(this).val('');
});
});