I have a hidden field called Id on the page.
I also have 2 radio buttons with the following markup:
<input type="radio" value="cats" name="xxx" id="x1" checked="checked">
<label for="1st16th">1st & 16th of the month</label>
<input type="radio" value="bananas" name="xxx" id="x2">
<label for="SpecifyRecurrence">Specify Recurrence</label>
For some reason the second is always checked even though the first says it's checked in the markup. It renders correctly in IE. Also, if I change the id of the hidden field to xId then it will render correctly in FF.
This occurs in xhtml as well as html 5.
Is there anything in the docs that says that you shouldn't use Id as an id on the page or is this just a FF bug?
You are probably testing this by clicking on the second radio button and then pressing Refresh.
Firefox will remember the state of the radio group and use that instead of the default values.
Click in the address bar and press enter to load the page fresh and use the default values.
Related
I'm trying to be WCAG friendly and have created a group of radio buttons, which, when they receive on-change, trigger action. But when I tried to navigate it by shift+arrow, I discovered that it doesn't just focus them, but right away checks them on? Am I missing something here, or is that normal behavior?
Edit:
The code looks like this for example:
<input type="radio" name="month" value="jan">January</input>
<input type="radio" name="month" value="feb">February</input>
<input type="radio" name="month" value="mar">March</input>
You didn't post any code so I'll assume you're using
<input type="radio">
and that you have several of them all with the same name attribute and that each radio button has a properly associated label with them. (Lots of assumptions but we can only guess if you don't post any code.)
When no radio buttons are initially selected, different browsers treat navigation to them differently.
On Firefox, I can tab to each radio button in the group.
On Chrome, I can only tab to one radio button in the group.
The tab does not select the radio button. It only moves the focus there.
Once my focus is on a radio button, then the arrow keys perform two behaviors:
It moves the focus to the next (or previous) radio button in the group and
It selects the radio button.
It sounds like you're asking about #2 behaivor. If so, then what you are seeing is normal behavior.
I encountered a problem, where one radio button group is dependant on other state, which caused a disabled radio button to be selected. This is not a problem when selecting another value in the radio button group with the mouse for example, but it seems it is impossible to tab to the radio button group now. I realise that I maybe should not let this happen, but I think it is strange that you can build radio button group that you cannot change by keyboard alone. Here is a simple example:
<input type="radio" disabled checked name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
<input type="radio" name="test" value="4">
Is there something I can do to "fix" this behaviour, or does anyone have a good way to handle these edge cases, or how to code if differently all together to avoid this issue?
This is clearly a browser issue, although i'm not sure what would be the expected bahaviour.
The problem is that when you have a radio group, the keyboard goes to the selected element. If this element is disabled, then the focus will jump the whole radio group even if the other one are not disabled.
One "fix" would be to avoid the problem by dissociating the radio buttons in two groups and relying on some javascript code to let them appear as a whole group. You can also reimplement the whole radio button feature by using aria role="radio" on 4 div elements.
It's also possible to ask and wait for the bug to be fixed.
I am experiencing something weird with radio buttons, and I'm hoping someone here can explain to me what is happening.
I have created a radio button like so:
<input type="radio" name="radio-smoker" value="true" />
When I load the page in the browser (Chrome), and inspect the radio button I see:
<input type="radio" name="radio-smoker" value>
The value attribute has no value.
However, when I change the value from "true" to "1", the value attribute works and the value "1" is retained.
I also noticed that if I set a value of "test1", I end up with a value of "1". It seems to strip out the letters, only allowing numbers.
I have tried to recreate this elsewhere (e.g. jsBin), without success. It only happens in the one place.
What is happening, and where can I begin to find out what's causing it?
It works for me. Inspect the element and you can see the value isn't changed on runtime.
<form action="">
<input type="radio" name="radio-smoker" value="true" > True
<br>
<input type="radio" name="radio-smoker" value="true1" > True1
</form>
After some investigating, it turns out there was a jQuery mask plugin setting a number mask on all inputs of the page. Thus why only numbers were allowed. Once that was removed, all radio button values started working as intended.
Is there a way in html markup to have a checkbox greyed-out and checked?
I wan't to keep the checkbox styled depending on the browser, so not alter it too much with css.
I'm trying to have a row of 4 checkboxes. One is checked and blue by default, the other three are disabled and greyed out. When you either:
- click on the first one the other three become actively blue again
- or when you click on one of the three disabled ones the first one becomes inactive
<input type="checkbox" checked disabled />
<input type="checkbox" checked onclick="return false"/>
OR
<input type="checkbox" checked disabled />
The disabled will gray it out, the first example won't
Add disabled="disabled" to the end of the input tag. If you wanted the checkbox to be ticked on load add checked instead.
I have some php generated yes/no radio buttons. When the buttons are given to the browser (tested in Chrome and Firefox) the yes button value is being turned to blank/null. I have verified that the html being passed is correct. I am now stumped.
An example of the code sent to the browser (this is the value sent from php script):
<label for="viol_comveh_yes">YES</label><input type="radio" name="YN_COMVEH_VIOL" value="yes" id="viol_comveh_yes" data-save="true"/>
On every one of these buttons the value is being turned to null.
PHP sends only a value when the checkbox/radio button is selected.
That means that the name from the checkbox/radio contains the value. An example:
<input type="radio" name="Foo" value="bar" />
When it is post you have:
echo $_POST['Foo']; // bar
I hope this is what you are looking for!