<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);
});
Related
I need to have 2 checkbox work as radiobutton, but I can't use radiobutton cause I want to make uncheck available
<script type="text/javascript">
$(document).ready(function() {
$(".gps-garmin").click(function() {
selectedBox = this.id;
$(".gps-garmin").each(function() {
if ( this.id == selectedBox )
{
this.checked = true;
}
else
{
this.checked = false;
};
});
});
});
<td><input type="checkbox" id="garmin" value="garmin" class="gps-garmin"></td>
<td><input type="checkbox" id="gps" value="gps" class="gps-garmin"></td>
Actually my checkbox are working exactly like radio button, I found this code here, but I need to make uncheck possible
Try this:
$(".gps-garmin").click(function() {
var check = $(this).prop('checked');
$(".gps-garmin").prop('checked',false);
$(this).prop('checked', (check) ? true : false);
});
As mentioned in How-to-uncheck-a-radiobutton, you should be able to clear a radio-button by using plain js or jQuery
For example in case of using plain js (copied from the linked answer):
this.checked = false;
Is this You trying:
$(".gps-garmin").click(function() {
if($(this).prop("checked") == true){
$(".gps-garmin").prop('checked',false);
$(this).prop('checked',true);
}
else if($(this).prop("checked") == false){
$(".gps-garmin").prop('checked',false);
}
});
I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?
Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});
demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...
I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.
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')
});
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",""); };
}
I have a small javascript that changes the title of a input-field to it's value and some other stuff:
function autoFill(id){
if(jQuery(id).val()==""){
jQuery(id).val(jQuery(id).attr("title"))
.addClass("help");
};
jQuery(id).focus(function(){
if(jQuery(this).val()==jQuery(this).attr("title")){
jQuery(this).val("").removeClass("help");
}
})
.blur(function(){
if(jQuery(this).val()==""){
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
jQuery(".trip").submit(function(){
if(jQuery(id).val() == jQuery(id).attr("title")){
jQuery(id).val('');
}
});
}
When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:
autoFill(".field");
Now I have to make it like this instead:
autoFill("#driver_from");
autoFill("#driver_to");
autoFill("#driver_when");
autoFill("#passenger_from");
autoFill("#passenger_to");
autoFill("#passenger_when");
how do I make it so that it works on every field instead?
Something like this would work:
function autoFill(selector){
jQuery(selector).each(function() {
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
};
jQuery(".trip").submit(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val('');
}
});
}).focus(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val("").removeClass("help");
}
}).blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
}
The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.
Or, rewrite it as a plugin like this:
(function($) {
$.fn.autoFill = function() {
return this.each(function() {
$(".trip").submit(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val('');
}
});
}).focus(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val("").removeClass("help");
}
}).blur(function(){
if($(this).val() == "") {
$(this).val($(this).attr("title")).addClass("help");
}
}).blur();
};
})(jQuery);
Then you can call it like this:
$(".field").autoFill();