We Keep Coding

jquery problems on click()

<script type="text/javascript">
$(document).ready(function(){
$("input[name='trim']").click(function (event) {
if ($(this).val() == "deluxe") {
$("input[name='option']").attr("checked", true);
} else if ($(this).val() == "plain") {
$("input[name='option']").attr("checked", false);
}
});
$("input[name='option']").click(function(event){
$("#custom").attr("checked","checked");
});
});
</script>
This is radio and click button problem. First I click deluxe button, check button works fine. Then I click plain button it works fine too. Then I re-click deluxe button, check button won't working. Then I try to test out custom button. It not working either after I click plain button. Does anyone know whats going on? By the way plain works fine from beginning.

You should use jQuery prop() instead of attr(). attr() is buggy.

Use the following code which is a great jQuery extension. It will accept 1,0,'1','0',true,false, and unidentified. To see in action see my fiddle I posted your usage as well.
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
} else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
} else if(value === 1 || value === '1') {
$(this).each(function(){ this.checked = true; });
} else if(value === 0 || value === '0') {
$(this).each(function(){ this.checked = false; });
}
return this;
};
})( jQuery );
Your usage would be like so:
$("input[name='trim']").click(function (event) {
if ($(this).val() == "deluxe") {
$("input[name='option']").checked(1);
} else if ($(this).val() == "plain") {
$("input[name='option']").checked(0);
}
});
$("input[name='option']").click(function(event){
$("#custom").checked(1);
});

How to add a class to a div on load?

Here's what I'm using
$(document).ready(function() {
$(".accept").change(function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
});
});
It works after you change the value, but how do I add the style to the div on load to disable?
Do I simpily juse call
$(".generateBtn").addClass("disable");
Or is there a more elegant technique

How about just triggering a change ?
$(document).ready(function() {
$(".accept").on('change', function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
}).trigger('change');
});
I'm guessing you meant to write removeClass and not remove, if so :
$(document).ready(function() {
$(".accept").on('change', function () {
$(".generateBtn").toggleClass('disable', this.value=='0');
}).trigger('change');
});

Mouseover/MouseOut jquery

I realize how simple this question should be to answer but I am in a medication fog and the answer is escaping me.
I would like to make this into a simple function to display specific text if the value of the text box is empty upon mouseout and to empty out the text value upon mouseover.
What I have right now that works but is very ugly:
$(".disappearOnClick").live('mouseover',function() {
if($(this).val() === 'BFA Offset') {
$(this).val('')
}
});
$(".disappearOnClick").live('mouseout',function() {
if($(this).val() === '') {
$(this).val('BFA Offset')
}
});

You can bind to multiple events using the live() method - so you could use something like this ->
$('.disappearOnClick').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
if($(this).val() === 'BFA Offset') {
$(this).val('');
}
} else {
if($(this).val() === '') {
$(this).val('BFA Offset');
}
}
});

$(".disappearOnClick").mouseover(function(){...});
and
$(".disappearOnClick").mouseout(function(){...});
Would work just as well.

You should use hover instead:
$(".disappearOnClick").hover(
function(){
//mouseover
},
function(){
//mouseout
}
);

You could try something like this (you could of course change the focus/blur events to mouse-events):
http://jsfiddle.net/BD7JA/2/
// <input value="BFA Offset" data-placeholder="BFA Offset" class="is-placeholder" />
$('[data-placeholder]').on({
focus: function (evt) {
if ($(this).hasClass('is-placeholder')) {
$(this).val('');
$(this).removeClass('is-placeholder');
}
},
blur: function (evt) {
if ($(this).val() === '') {
$(this).val($(this).data('placeholder'));
$(this).addClass('is-placeholder');
}
}
});

Try this:
$(".disappearOnClick").mouseenter( function (this) {
if ($('#'+this.id).val() == 'BFA Offset')
$('#'+this.id).val('')
}).mouseleave( function (this) {
if ($('#'+this.id).val() == '')
$('#'+this.id).val('BFA Offset')
});

how to highlight the row regardless of case sensitive using jquery

$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.

use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {

This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.

Easy modification to jQuery code to make use of more than one textbox

How to change the following code to make use of all my 4 textboxes with id extra1, extra2,persons and tables?
$(document).ready(function () {
$('#extra1').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});

$('#extra1').blur(function () {
to
$('#extra1, #extra2, #persons, #tables').blur(function () {

The code modification would be:
$(document).ready(function () {
$('#extra1, #extra2, #persons, #tables').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});
But, why not give all of them a class, and use that class as the selector? That way, you can easily add elements later without changing your Javascript.

Use jQuery delegate which will bind only one event handler but will act only on the element which triggers the event. Try this
Wokring demo
$(document).ready(function () {
$('formSelector').delegate('input[type=text]', 'blur', function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});