I have an HTML form with two disabled checkboxes and and image with an onclick event that needs to show a popup and enable the checkboxes:
<input id="chk1" type="checkbox" disabled="disabled" />
<input id="chk2" type="checkbox" disabled="disabled" />
<img src="..." onclick="window.open('...'); document.getElementById('chk1').disabled=false;document.getElementById('chk2').disabled=false" />
except it doesn't work. The popup window opens, but the checkboxes never enable.
Instead of disabled=false I've tried removeAttribute("disabled") with no luck. I also placed the window.open as the last statement in the onclick with no change.
jQuery is not in this project (yet) so I can't use it. What am I doing wrong?
Edit:
When I posted this, I failed to disclose the input tags are being rendered by ASP.NET. Through testing we've discovered there's a difference between using <asp:CheckBox /> and <input type="checkbox" runat="server" /> that affects how the disabled property behaves in IE and FF.
I've been under the impression that the final output would be the same, but apparently not, though I haven't been able to spot the difference. The rendered code as represented above works in FF but not IE when using an CheckBox object, but works in both when using an HtmlInputCheckBox object.
(I should also point out that the getElementById calls are actually using the ASP.NET ClientID property for the respective elements.)
My question now, then, is why is this the case? Why does the enable/disable functionality work in both IE and FF when using a HtmlInputCheckBox object but not for a CheckBox object?
Try with this,
inputElement.removeAttribute( 'disabled' );
inputElement.closest('span').removeAttribute( 'disabled' );
I just found the solution. It works for me !
var checkBox = document.getElementById('" + chkBox.ClientID + "');
checkBox.removeAttribute('disabled');
checkBox.parentNode.removeAttribute('disabled');
First check your network, second here is a link, a nice function to use for you
Checkbox Disable/Enable JS Function
To enable a checkbox, I generally apply both of the following:
inputElement.disabled = false;
inputElement.removeAttribute( 'disabled' );
Some browsers like the DOM node property, others want the attr adjusted.
I apologize if this is what you said you were doing which was not working--I wasn't quite clear on what you were saying.
Try doing this:
document.getElementById('chk1').getAttribute("disabled") = false;
In fact, you do the oppisite to enable your checkbox. Try these...
document.formname.chkname.disabled='';
Related
I'm wrapping some radion button to give them a better style, using css and jquery to handle the radion selection.
I'm using this HTML to wrap the radio input element:
<button class="radio-button inches inches-selected">
<input type="radio" id="inches" name="unit" value="inches" checked="checked">
</button>
All works well as expected in each browser, but in IE when I try to get the checked status (set by default in the HTML) I get "undefined".
I've tried:
$("#inches").is(":checked");
$("#inches").attr("checked");
$("input[value=inches]").is(":checked");
but I always get "undefined".
Any suggestion?
I didn't think you could wrap an <input> in a <button>. But assuming you can, you should not use the selector $("input[value=inches]") since that would also select any other input elements (e.g. text boxes) that have inches as its current value. Other than that, I'm not familiar with the button wrapping technique so I am suspicious of that approach overall.
I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing.
I've tried:
document.FORM.RADIOBUTTON[INDEX].focus();
and it actually works well in google chrome, but for some reason it doesn't work on firefox,
i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox.
any ideas in how to get this to work?
It indeed works in firefox but the issue is the focused item is not highlighted in firefox. If you try to navigate the next DOM element using tab key, you will find it works. Some styling can be applied to element but DOM element styling also differ from browser to browser. See an example here
http://jsfiddle.net/uQ3vk/
Without seeing your HTML the best option I can suggest is to give your radio buttons (or at least the one(s) you want to be able to focus programmatically) an ID:
<input type="radio" id="radio1" name="someradiogroup" value="somevalue">
<input type="radio" id="radio2" name="someradiogroup" value="someothervalue">
<script>
document.getElementById("radio1").focus();
</script>
As with any programmatic access to DOM elements your code won't work if the element(s) haven't been parsed yet, so the code should be either in the document.ready / onload handler or later in the source than the element(s) in question. (Or in a submit handler, assuming a submit won't happen before the page loads.)
I think the missing outline in Firefox is the issue, I know it was for me. I added some CSS and got it to show.
input:focus
{
outline:#000 dotted 1px;
}
select:focus
{
outline:#000 dotted 1px;
}
I am building a web form for a login. I've decided to add in a few features I wouldn't normally. However I can't seem to get them to work in every instance. So, here's my problem.
On the form, as you progress through each of the inputs a javascript box on the side of the page scrolls down and notifies you about that input i.e. what they can enter, how many characters they have left.
It works great with text boxes, because i can use an onfocus and onblur event handler. However when you reach, for example, a div that has multiple check-boxes you can't exactly use the above event handlers for each input, because then they would have to select an option before the box tells them what it is about.
Ive tried using the onMouseOver and onMouseOut event handlers for the whole div, but it doesn't work fluidly.
So any suggestions? Maybe, is there a way to active a function if a users puts their cursor on a certain part of the screen?
hope this make sense,
thanks
could make a little ? icon or something next to it for someone to hover over, and attach the event to that...
...anyways...you sure you doing it right? post some code...for example, this works just fine..when I hover over the 2nd checkbox, I get the alert
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input onmouseover="alert('test');" type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
You should still have the focus/blur events on the checkboxes I think, for people using the keyboard.
Are you working with a js framework? With jQuery, you can simply do:
$(function() {
$(".div_around_the_checkboxes").hover(function() {
// show
},
function() {
// hide
});
});
I am frustrated with the most idiotic browser of all time, for which, Bill Gates must be hanged I think.
I just want to check whether a checkbox is checked or not.
Somehow
cbox.checked
property is always false. What other thing I can do. I saw all the other similar questions, but nothing is working with this stupid IE.
EDIT
I forgot to mention something that may be relevent. Html is like:
<input type='hidden' name='terms' value='0' />
<input type='checkbox' name='terms' id='terms' value='1' />
Hidden field is attached with it, because I am using Zend Form, and it always attaches a hidden field with every checkbox.
I am using protoype.js thats why I cannot use jQuery. I am checking that its check or not, in onsubmit event of the form. I guess somehow hidden field with the same name is tripping IE6
$('#myElement').is(":checked")
Ignore the IE6 nonsense, and just use jQuery.
http://www.jquery.com
Now you've posted your HTML your problem is clear: you've got two form elements with name 'terms' and IE 6 is finding the wrong one, because it has a broken implementation of document.getElementById that uses the name attribute of form elements as the id. The solution is to ensure you don't have form elements with the same name as any element you wish to refer to by id, and avoid using the same name for unrelated form elements.
Note that the problem will also exist in IE 7, according to this blog post.
I have to agree, IE 6 is a pain sometimes, and unfortunately we have to cater to that minority who still haven't upgraded. But this works for me within IE6
EDIT: After reading Tims Post have updated function reflect this. Tested and works in IE6.
function chk(){
inps = document.getElementsByTagName("INPUT");
for(i = 0; i < inps.length; i++){
if(inps[i].name == "terms" && inps[i].type == "checkbox"){
alert(inps[i].checked);
}
}
}
On my site, I have two checkboxes created in my ASP.NET MVC view like so:
Html.RadioButton("check", "true", "true" == (string) ViewData["someKey"], new { id = "check1"});
Html.RadioButton("check", "false", "false" == (string) ViewData["someKey"], new { id = "check2"});
I am positive that ViewData["someKey"] has the value "true" in it.
In my JS init function, I perform the following check:
alert($('#check1').is(':checked') + " " + $('#check2').is(':checked'));
In Firefox (and only Firefox), my alert dialog will show the following (it works as expected in every other browser):
Initial page load: true false
Normal refresh via Ctrl + R: false false
Refresh skipping cache via Ctrl + Shift + R: true false
I have tried many different methods of looking at the checkbox value, including $('#check1').attr('checked') without success. If I examine the HTML in Firebug, I can see that the first radio button has the property checked="checked" in it.
Why is the checkbox value changing in FF when I refresh, and how can I mitigate this? Since this seems to be a FF-only bug, how can I change my code to make it work?
This SO question seemed to ask something similar, but none of the proposed solutions seem to work in this case.
Edit: I should also point out that when the radio button is rendered after the refresh in FF, it's not actually being displayed as checked either, despite what the HTML is telling me.
Edit2: Adding raw HTML as per request
<input id="check1" type="radio" value="True" name="check" checked="checked"/>
<input id="check2" type="radio" value="False" name="check"/>
Can we see the generated HTML? Are you really creating two radio buttons with both the same name and the same value?
Remember when you hit refresh, browsers try to preserve the form field contents of the page before the refresh. This includes radio button state. If you have two indistinguishable radio buttons that would seem to be a good way to confuse a browser trying to re-establish the form state.
It sounds like your script could be running before the page is fully loaded. Where did you put the Javascript code? If you haven't already, try moving the code to the end of the <body> block.
I had the same problem a few days ago and the issue was that I was doing the "check" before the item was fully loaded or rendered, it was a DropDownList that I rendered with jQuery.
My case was very specific, but I had to rework the code to take this into account...
It seems that the problem isn't with checking whether or not the radio buttons are checked, but more that they buttons are actually unchecked even though the HTML code says otherwise.
I've posted a followup question to this one here as an addendum to this topic.
EDIT: This page has a good description of the problem and the solutions you can take to solve it.
I used this to force firefox to reset the radiobuttons checked upon refresh.
$(function(){ $('input[name="radiobuttongroup"]')[0].checked = true; });
where [0] is the index of the radiobutton in the specific group ( [0] = first radio button, [1] = second radio button, ..)
We've had a similar bug in firefox when using jquery to change the selection. Even though the code changed correctly according to firebug none of the radio buttons was selected. The solution we found is to remove the radio buttons from the DOM and just put them back.
var allradiobuttons = $('...');
allradiobuttons.click(function() {
var radiobutton = $(this);
allradiobuttons.removeAttr("checked");
radiobutton.attr("checked", "checked");
var parent = radiobutton.parent();
parent.html(parent.html()); // This is a weird fix
}