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
}
Related
Brief: I need to grab the information in parentElement, but I need the input information updated. when I am grabbing the innerHTML of parentElement, after the box is unchecked, it still shows up checked. The html is not reflecting changes I've made with javascript.
I have a small snippet of my code here: http://jsfiddle.net/7993K/8/
<div id="parentElement">
<label id="thisLabel">
<input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>
function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}
The slightly longer version of why I am going about it like this:
This is a large form that a site inspector checked out. It is brought into an online software app, and the lady in charge of communication with clients will review this information, speak back with the inspector on the phone. This form is saved in a database as html. After the woman is done reviewing the form, there may be a box or two that wasn't checked, that she would like to check, before emailing to the client ( there were issues, needed to be fixed, now that they are fixed, she can send out the proper report that everything was checked off)
She checks the boxes off, but they don't update the HTML, they only change the value, which will show, but won't show up when I get the innerHTML of parentElement. You will see in my JSFIDDLE http://jsfiddle.net/7993K/8/:
Click check it out upon loading: checked = checked
uncheck box: checked = checked
change to false: alert confirms the checked property is false, but check it out shows the innerHTML as checked.
I will need to access this innerHTML with the proper information loaded (as in, if it is checkmarked, the html should reflect that)
PRE-EDIT: I think I can do this by making an event onclick of the label. That event takes the ("parentElement").innerHTML and split it in a few different places and put it back together with the right checked value. Will be slightly different if the input isn't checked to begin with. That is the only way I can think of doing this, and it just doesn't seem like the right way.
The state of checkboxes and the value of input boxes are NOT a part of the source HTML.
For proof of this, try putting a textbox on a page with value="old", change the value, then compare element.getAttribute("value") and element.value - they're not the same.
You really should save the state of the form, rather than the HTML behind it.
This is happening because element.childNodes[0].checked = false; is setting the DOM property, which is a separate entity than the HTML attributes.
Your checkit function should also be interrogating the DOM property, not checking the innerHTML.
See this question for more information about DOM properties and HTML attributes.
A quick question which is driving me a little insane. I have some radio buttons on a lightbox that is fired when a user wishes to edit some entered values. This is an old system which I didn't write. Now the problem/solution is relatively easy however when testing in IE7 I've noticed some issues with:
document.getElementById(thisID).checked = true; // thisID is the ID of a radiobutton
Basically the above code doesn't set the checked value on a radio button.
I thought I could sort this by using:
document.getElementById(thisID).defaultChecked = true;
However if I return and change my radio button values previous radio buttons remain selected, as their .defaultChecked status hasn't been updated! I can't control the number of radio buttons as they are generated on the server (as are their IDs) and the values for the radiobuttons are stored on the client until the form is submitted.
Is there a way around the document.getElementById(thisID).checked bug in IE7?
I just had to loop through all the radiobuttons and set the .defaulChecked to false before resetting... damned IE7!
There is an possible duplicate which consists of the same issue in which the checking of the radio button is not working in IE7.
Kindly go through the link Check Here
I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.
Screenshot:
The Goal:
I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:
// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Issue:
This code seems to be working, with a couple of quirks.
The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't happen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).
There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.
Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:
When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.
Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/
From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.
A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.
An even better way than that, use jQuery to create a sortable list.
http://jqueryui.com/demos/sortable/
-Sunjay03
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='';
I have the following html page:
<html>
<body>
<script>
var check = 0;
function doNow()
{
void(d=document);
void(el=d.getElementsByTagName('INPUT'));
for(i=0;i<el.length;i++)
{
if(check == 0)
void(el[i].checked=1)
else
void(el[i].checked=0)
}
if(check == 0)
check = 1;
else
check = 0;
}
</script>
<HR>
<form>
<INPUT TYPE="CHECKBOX" name="DG1">DG1
<INPUT TYPE="CHECKBOX" name="DG2">DG2
<INPUT TYPE="CHECKBOX" name="DG3">DG3
<INPUT TYPE="CHECKBOX" name="DG4">DG4
<INPUT TYPE="CHECKBOX" name="DG5">DG5
<input type=button onclick="doNow()" value="CheckBox All Now">
</form>
</body>
</html>
If "CheckBox All Now" is clicked all checkboxes are checked. Then,
if "Back" button or "Refresh" button is pressed. The "CheckBox All now" has to clicked twice to uncheck all checkboxes.
Please let me know how to handle "CheckBox All Now" in case of "Refresh" or "Back".
Thanks in Advance,
Mahesh.
It's because when the page is reloaded, the Javascript is parsed and your declaration
var check = 0;
unsurprisingly causes the check variable to be reset to zero at this point. Thus after the page is reinitialised, the first click of the button will enable all checkboxes. It seems that the issue here stems from a difference in how the form renderer remembers state, and how the Javascript engine remembers "state". The latter can't really be "fixed" the way you want as the script essentially needs to be run every time.
What you might choose to do is pull the initial "checked" state out of the controls themselves. Your current code explicitly assumes that the checkboxes will all be unchecked initially (this is basically what you're saying by "check = 0"; this variable is storing the state of the checkboxes as far as the Javascript is aware). Instead, you might change the line to:
var check = document.getElementsByTagName('INPUT')[0].checked;
Of course, this wouldn't work in the current location as it is declared before the form is defined. You would either need to register this as a closure to be run once the document has loaded, or alternatively pull this line out and put it in <script> tags that occur after the form element in the document (this isn't the cleanest way to do it but works for quick-and-dirty development; registration of functions within the head is the way to go in general).
I've tested both approaches and they work. I'm sure that there will be other potential solutions to this issue that come up with other peoples' answers!
EDIT: Big edit after thinking about this for a while. The fundamental issue here is that the check variable gets out-of-sync with the actual checkboxes themselves - what I described above is a way to avoid this when the page is reloaded/reinitialised.
However, you will still have other issues. What happens if the user manually clicks all of the checkboxes? They will now be active, but your check variable will still be 0, and so click the "check all" button will activate them all (which will have no effect). If I clicked this button with all checkboxes checked, I would expect it to behave consistently, regardless of how those checkboxes got to that state (which should be irrelevant).
Also, what happens if some of your checkboxes are checked and some are unchecked? What is the button meant to do in that situation?
The best solution overall would probably be to remove the check variable altogether, and instead work it out on demand at thstart of every doNow call. That is, inspect the array of checkboxes, read their current values and from this derive what the checkboxes should be set to. (This might be really simply if, for example, the functionality turns out to be that every checkbox should simply be individually inverted - it depends on the actual functional requirements.)
(Also, as a coding style issue, the part of your code that says
if(check == 0)
void(el[i].checked=1)
else
void(el[i].checked=0)
can simply be replaced by
el[i].checked = (1 - check);
and asides from the fact that we're hopefully getting rid of this variable, it ought to be a boolean rather than an integer as it only has two states.)
My suggestion is to use a checkbox instead of a button. When someone clicks on the checkbox, all other checkboxes will be set to however that checkbox is set.
So, if the "Check all" checkbox is checked, and you click it. all other checkboxes will be cleared.
Should work a bit better in the scenario you describe.
dtsazza is right - when the page is refreshed you start from scratch.
I note that the 'Check All Now' button actually toggles the checked status. How about 2 buttons (links might be better); one to check all and one to uncheck all?
You could store the checked variable in a hidden field. That way it would persist with the same longevity as the checkboxes.