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
}
})
})
Related
I'm using the following code to hide the text based on the answer given. Its so simple but i must be missing something. What am I doing wrong?
$('.nameclass').on('change', function() {
if( $('input[name=idname]').val() == '1' ) {
$('#idname').removeClass('hide');
} else {
$('#idname').addClass('hide');
}
});
<div class="hide" id="idname">
<legend>To be hidden depending on answer</legend>
</div>
</div>
Your select selector is not correct. In the listener selector, there is no tenaamstellingclass assigned class to the select box. In the if statement you are trying to get the select box by using input[name=tenaamstelling] when you should use it like select[name=tenaamstelling] because it is a select box and not an input field.
You can either add the tenaamstellingclass class to your select input, or use this code.
Just replace this:
$('.tenaamstellingclass').on('change', function() {
if( $('input[name=tenaamstelling]').val() == 'VOLMACHT' ) {
$('#tenaamstelling_volmacht').removeClass('hide');
} else {
$('#tenaamstelling_volmacht').addClass('hide');
}
});
with:
$('select[name="tenaamstelling"]').on('change', function() {
if( $(this).val() == 'VOLMACHT' ) {
$('#tenaamstelling_volmacht').removeClass('hide');
} else {
$('#tenaamstelling_volmacht').addClass('hide');
}
});
Now, if the .hide is defined correctly in your CSS, everything should be fine
You can check it here:
https://jsfiddle.net/vk3o6gyc/
Given your HTML, the default for the #tenaamstelling_volmacht div is hidden and when option 2 is selected it is then displayed.
I have this function, all im trying to do is if the first radio button is selected, then hide a few input fields and make them not required by the form. Then is the other radio button is selected then show those hidden fields and make them required by the form. The user may change between the radio buttons, and so the show hide operation and adding and removing of the required attributes have to happen on radio button change. At the moment the fields are showing and hiding but i cannot change the required attributes. Any ideas? Thank you.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
$('#1041827741').setAttribute("required", "");
$('#1283215174').setAttribute("required", "");
$('#1496644528').setAttribute("required", "");
$('#1392644643').setAttribute("required", "");
$('#1321281340').setAttribute("required", "");
}
else {
$('#show-me').hide();
$('#1041827741').removeAttr('required');
$('#1283215174').removeAttr('required');
$('#1496644528').removeAttr('required');
$('#1392644643').removeAttr('required');
$('#1321281340').removeAttr('required');
}
});
});
Use the prop() method:
$('#1041827741').prop('required',true);
You could use .prop("required", true / false) to set and remove. Also, setAttribute and removeAttribute methods are native DOM methods which directly operate on the element.
If you do not have an option of changing the elements markup you could modify your code to save some typings.
Here is what you could do to fix.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var ids = ["#1041827741", "#1283215174", "#1496644528", "#1392644643", "#1321281340"];
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
ids.forEach((id) => $(id).prop("required", true));
} else {
$('#show-me').hide();
ids.forEach((id) => $(id).prop("required", false));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
if you do have options to change the elements, I would assign a same class name to all of those elements and just operate on the ids.
Here is what it can be done.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
//inputElement is the class assigned to all input elements
$(".inputElement").prop("required", true);
} else {
$('#show-me').hide();
$(".inputElement").prop("required", false);
}
});
});
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
I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.
This is what I'm currently working with code wise:
$('#ResultsNoData1').click(function () {
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
if (this.checked) {
parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
My original design worked by doing the following:
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show();
});
However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.
Current example
Here you go: http://jsfiddle.net/cx96g/5/
Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
if (this.checked) {
node = parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
You need to show and hide that TextBox not remove.
$('#ResultsNoData1').click(function () {
if (this.checked) {
$("#Results1").hide();
}
else {
$("#Results1").show();
}
});
Working example
$('#ResultsNoData1').click(function () {
(this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
(this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});
JSFiddle
You are doing it right way but missing one small thing need to remove value from the textbox.
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});
or
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});
And this is the right way(show/hide) the textarea.
I've got the following code in my web page, where I need to click on the input field and add values using the number pad provided! I use a script to clear the default values from the input when the focus comes to it, but I'm unable to add the values by clicking on the number pad since when I click on an element the focus comes from the input to the clicked number element. How can I resolve this issue. I tried the following code, but it doesn't show the number in the input.
var lastFocus;
$("#test").click(function(e) {
// do whatever you want here
e.preventDefault();
e.stopPropagation();
$("#results").append(e.html());
if (lastFocus) {
$("#results").append("setting focus back<br>");
setTimeout(function() {lastFocus.focus()}, 1);
}
return(false);
});
$("textarea").blur(function() {
lastFocus = this;
$("#results").append("textarea lost focus<br>");
});
Thank you.
The first thing I notice is your selector for the number buttons is wrong
$('num-button').click(function(e){
Your buttons have a class of num-button so you need a dot before the class name in the selector:
$('.num-button').click(function(e){
Secondly, your fiddle was never setting lastFocus so be sure to add this:
$('input').focus(function() {
lastFocus = this;
...
Thirdly, you add/remove the watermark when entering the field, but ot when trying to add numbers to it (that would result in "Watermark-text123" if you clicked 1, then 2 then 3).
So, encalpsulate your functionality in a function:
function addOrRemoveWatermark(elem)
{
if($(elem).val() == $(elem).data('default_val') || !$(elem).data('default_val')) {
$(elem).data('default_val', $(elem).val());
$(elem).val('');
}
}
And call that both when entering the cell, and when clicking the numbers:
$('input').focus(function() {
lastFocus = this;
addOrRemoveWatermark(this);
});
and:
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
You'll see another change above - you dont want to use append when appends an element, you want to just concatenate the string with the value of the button clicked.
Here's a working branch of your code: http://jsfiddle.net/Zrhze/
This should work:
var default_val = '';
$('input').focus(function() {
lastFocus = $(this);
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
var text = $(e.target).text();
if (!isNaN(parseInt(text))) {
lastFocus.val(lastFocus.val() + text);
}
});
Live demo
Add the following function:
$('.num-button').live( 'click', 'span', function() {
$currObj.focus();
$currObj.val( $currObj.val() + $(this).text().trim() );
});
Also, add the following variable to global scope:
$currObj = '';
Here is the working link: http://jsfiddle.net/pN3eT/7/
EDIT
Based on comment, you wouldn't be needing the var lastFocus and subsequent code.
The updated fiddle lies here http://jsfiddle.net/pN3eT/28/