$("#paragraphDuration").bind('keyup', function() {
var fullDuration = $("#fullDuration").val(),
paragraphDuration = $(this).val();
$(this).after(function() {
if ($(this).val() != '') {
$(this).after(fullDuration - paragraphDuration + " min");
} else {
$(this).after("");
}
});
});
after i changed ("#paragraphDuration") many times , this is what i got:
this is not what i want !
how to replce previous .after when changing ("#paragraphDuration") value with new one ?
thank you
You need to overwrite the old value. It's best to not use .after to set the text, just use the .text() method on a predefined span element or so.
So for instance:
html
<input type="text" id="paragraphDuration"><span class="textContainer"></span>
js
$("#paragraphDuration").bind('keyup', function() {
var fullDuration = $("#fullDuration").val(),
paragraphDuration = $(this).val();
$(this).next('.textContainer').text(
$(this).val() !== ''
? (fullDuration - paragraphDuration + " min")
: ""
);
});
Related
I have the following JQuery code I am working on. When I test it, the expected values are shown in the span but not in the input text box.
JQ
$(function() {
$("#textbox").each(function() {
var input = '#' + this.id;
counter(input);
$(this).keyup(function() {
counter(input);
});
});
});
function counter(field) {
var number = 0;
var text = $(field).val();
var word = $(field).val().split(/[ \n\r]/);
words = word.filter(function(word) {
return word.length > 0 && word.match(/^[A-Za-z0-9]/);
}).length;
$('.wordCount').text(words);
$('#sentencecount').text(words);
}
Please see Fiddle. Please let me know where I have gone wrong. Still new to JS.
Thanks
Change this:
$('#sentencecount').text(words);
to this:
$('#sentencecount').val(words);
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method. -> http://api.jquery.com/text/
Trying using val() instead This should fix it up.
http://jsfiddle.net/josephs8/6B9Ga/8/
You can not set text to an input you must use value
try this.
$('#sentencecount').text(words);
//has to be
$('#sentencecount').val(words);
and i have also updated your Jsfiddle
$(function() {
$("#textbox").each(function() {
var input = '#' + this.id;
counter(input);
$(this).keyup(function() {
counter(input);
});
});
});
function counter(field) {
var number = 0;
var text = $(field).val();
var word = $(field).val().split(/[ \n\r]/);
words = word.filter(function(word) {
return word.length > 0 && word.match(/^[A-Za-z0-9]/);
}).length;
$('.wordCount').text(words);
$('#sentencecount').val(words);
}
I'm able to store text how I want but cant get check boxes to work properly. It is storing the check box values as 'on' regardless if checked or not. How can I set is to store "off" by default and "on" when checked?
something that would achieve this:
var value = $(this).val() && $(this).prop(checked);
JS Fiddle: http://jsfiddle.net/cRJ23/17/
Storage.prototype.setObj = function (key, obj) {
return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function (key) {
return JSON.parse(this.getItem(key))
}
var Survey = {},
Surveys = {},
save = function () {
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
console.log('Saving');
console.log(name + ':' + value);
Survey[name] = value;
});
if (localStorage.getObj('Surveys') != null) {
Surveys = localStorage.getObj('Surveys');
}
Surveys[$('#FirstName').val() + '.' + $('#LastName').val()] = Survey; //store in big list
localStorage.setObj('Surveys', Surveys);
}
Hope this helps:
var value = $(this).val();
var name = $(this).attr('name');
if($(this).hasClass('checkers')){
value = $(this).is(":checked")
if(value){
value='on';
}else{
value='off';
}
}
http://jsfiddle.net/juvian/cRJ23/22/
You should not use .val to check whether checkbox is selected, use .is('checked')
Instead of using .val()to get the state of a checkbox you should use .prop() or the property .checked
$('input, select, textarea').each(function () {
var value = ($(this).is('[type="checkbox"]')) ? this.checked :$(this).val(),
name = $(this).attr('name');
console.log('Saving');
console.log(name + ':' + value);
Survey[name] = value;
});
Working example: http://jsfiddle.net/cRJ23/24/
Working Fiddle http://jsfiddle.net/jFeLv/
The val function does not work like you would expect with check boxes, the way to get true or false from them is to use the is(':checked') function.
$(this).is(':checked')
The fiddle is a modified version of your code by modifying one line that seems to be working fine by shorthanding an if else for the variable "value" checking to see if it is a checkbox.
($(this).attr('type','checkbox') ? value = $(this).val() : value = $(this).is(':checked'));
I hope this helps.
I want to filter a list (show/hide the lis) based on the contents of a span within the li. Currently I have something working, but it filters the list no matter where the match occurs. I need it to be seeded to the start, so only if the match occurs at the start of the span will it be shown, otherwise it will be hidden.
<li><img/><span>text</span></li>
<li><img/><span>other text</span></li>
<li><img/><span>other words</span></li>
so, if I filter on "text", currently the first 2 would be returned whereas I only want the first (as the word "text" is at the start of it).
This is what I currently have:
var value = $("#listcontainer ul#list input").val();
if(value == '') {
$('ul#list> li').show(); //show all, if nothing entered
} else {
$('ul#list > li:not(.plain):not(:contains(' + value + '))').hide();
$('ul#list > li:not(.plain):contains(' + value + ')').show();
} //.plain = li which contains the text input
Thanks
Try:
$('ul#list > li:not(.plain)').text(function(i, text) {
var show = text.slice(0, value.length) === value;//starts with value
$(this).toggle(show);//if starts with val show otherwise hide
});
This will check if the text of each li starts with the value and show it if it does, otherwise hide it.
Try
var value = $("#listcontainer ul#list input").val().toLowerCase();
if (value == '') {
$('ul#list> li').show(); //show all, if nothing entered
} else {
var $lis = $('ul#list > li:not(.plain)').filter(function () {
return $.trim($(this).text()).toLowerCase().indexOf(value) == 0;
});
$('ul#list > li:not(.plain)').not($lis).hide();
$lis.show();
} //.plain = li which contains the text input
Even if you got this to work, you would run into all sorts of problems trying to escape parentheses, etc.
Try the more readable
var value = $("#listcontainer ul#list input").val();
if(value == '') {
$('ul#list> li').show();
} else {
$('ul#list > li').each(function() {
if($(this).text() == value) {
$(this).show();
} else {
$(this).hide();
}
});
}
Also, know that filter is an option (though for your problem, I would go with the solution above).
Try this way :
var value = $("#listcontainer ul#list input").val();
if(value == '') {
$('ul#list> li').show(); //show all, if nothing entered
} else {
$('ul#list > li').each(function() { $(this).toggle(
$(this).find('span').text() == value); });
}
I don't know why when a checkbox is clicked, it double the label text associated. Could anyone help me?
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child').attr('checked', this.checked);
$('.ck,.chkbox,.checkAll ,input:radio').DcustomInput();
});
jQuery.fn.DcustomInput = function(){
$(this).each(function(i){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);
var id=input.attr('id');
// get the associated label using the input's id
var forlabel = $('label[for='+input.attr('id')+']');
var chklabel = forlabel.text();
forlabel.hide();
var label = $("<label for='"+id+"' class='checker'>"+chklabel+"</label>");
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// alert(label);
// wrap the input + label in a div
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
if(input.is(':disabled')){
if(inputType == 'checkbox' && input.is(':checked')){
label.addClass(' checkedDisabled ');
} else{
label.addClass(' disabled ');
}
}
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
if(!input.is(':disabled') ){
$(this).addClass('hover');
}
if(inputType == 'checkbox' && input.is(':checked') && !input.is(':disabled')){
$(this).addClass('checkedHover');
}
},
function(){ $(this).removeClass('hover checkedHover focus'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked') && !input.is(':disabled')) {
if (input.is(':radio')) {
var allInputs = $('input[name='+input.attr('name')+']');
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked ');
}
else { label.removeClass('checked checkedHover checkedFocus '); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(inputType == 'checkbox' && input.is(':checked')){
$(this).addClass('checkedFocus');
}
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};
</script>
I'm not really aware of what DcustomInput does but I could guess that $('.ck,.chkbox,.checkAll ,input:radio').DcustomInput(); need to be placed on document ready and not on click handler
ok, I've found the solution, just comment these 2 lines:
forlabel.hide();
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
so that the old label is not hidden and we don't try to duplicate the input and the old label.
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}