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.
Related
If I create radio buttons in my model driven form, they work fine but they don't have the radio button selected reflected by the formControlName default value. For example:
<input type="radio" formControlName="isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
{{form.value.isPublic}}
If I have this it works correctly, but I can see the value of form.value.isPublic is false (as output in the last line to confirm) and yet no radio button is selected by default.
I tried to correct this by adding [checked] to each to drive the default value. This works for the page load, in that defaults are properly selected in the radio buttons. It even works for ONE selection - in that I can select the other radio button, it will be selected, the first one will be unselected, and the {{form.value.isPublic}} will change from false to true.
<input type="radio" formControlName="isPublic" [checked]="!form.value.isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isPublic" [checked]="form.value.isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
{{form.value.isPublic}}
The problem comes when I select the first radio button again - on the first click the radio button selection state doesn't change at all, but the {{form.value.isPublic}} output changes back to false. If I click it again, then the radio button selection state changes. So it takes two clicks to switch it back to the default. If I click the other one again after that, it changes as expected but switching back to the first one takes two clicks (one click updates the form value and the second click changes the selection state of the radio button).
What should I be doing in this situation to have the radio buttons function correctly and reflect the default value for the form?
After experimenting with using values from the form object to drive other Angular2 directives (like *ngIf) I discovered that the behaviour is always a little strange. For example, if I draw parts of the page using *ngIf based on the value of form.value.isProfilePublic, the *ngIf section would only change once even though I can see the value of that variable is changing. It isn't important to the answer so I won't elaborate but bottom line is that using form values to dynamically drive things that can update the form value itself doesn't work as I'd expect (likely for a good reason).
...so now I'm using a different variable not related to the form to drive the default selection and it works fine. So, the following works:
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="!currentUser.isProfilePublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="currentUser.isProfilePublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
I can't explain needing two clicks, but this should work:
<label>
<input type="radio" formControlName="isPublic" value="true" id="isPublic" (change)="form.value.isPublic = true"/> Make it public
</label>
<label>
<input type="radio" formControlName="isPublic" value="false" id="isPublic" (change)="form.value.isPublic = false"/> Keep it private
</label>
On my project we are generating the radio buttons dynamically based on the 'questions' example in the docs for Angular 2 Dynamic Forms
<label class="radio-inline" *ngFor="let opt of input.options">
<input type="radio" [formControlName]="input.key" [value]="opt.value" [id]="input.key" (change)="input.value = opt.value">
{{opt.label}}
</label>
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 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!
Here's the html for my button, according to Chrome:
<input checked="" type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default">
When I run this in my javascript console, the output output is "false"
$("input[type=radio]:first").attr("checked")
The actual UI element is visibly not selected. When I run this code, the button becomes visibly selected:
$("input[type=radio]:first").attr("checked", true)
Looking back at the html in Chrome, I see almost exactly the same thing I saw before. The only difference is that "checked" is now at the end of the tag instead of the beginning?
<input type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default" checked="">
A bit more information: there is another radio group lower down on the page. When I remove this second radio group, the first acts as expected. They are distinct groups. It is possible to manually select buttons from each one.
What's going on here? Why wasn't the button visibly selected to begin with?
##### EDIT
The button was selected to begin with, but wound up getting deselected due to a bug in some event binding code I was running.
The checked attribute corresponds to the checkbox's default checkedness, not its current checkedness.
In other words, the checked attribute corresponds to the defaultChecked javascript property, and not the checked property.
jQuery's $("foo").attr("checked", true) sets the checked javascript property, but doesn't affect the checked attribute.
Why is this line not working?
<input type="checkbox" checked="no"/>
<input type="checkbox" checked="false"/>
Even though i have specified no and false in checkbox value both are checked by default.
Thanks in advance :)
changing it to this will make the first unchecked, and the second checked :
<input type="checkbox" />
<input type="checkbox" checked />
To make the checkbox unchecked you need to remove the word "checked".
Try this -
<input type="checkbox" checked/>
The attribute "Checked" will keep your checkbox checked by default. If you do not have this attribute mentioned, then the checkbox will be unchecked by default.
<input type="checkbox" checked="checked" />
this will pass html validation
Even though i have specified no and false in checkbox value both are checked by default.
this is default behaviour for boolean values in HTML elements.
Only removing the checked attribute altogether will make the element not checked.
The background is in On SGML and HTML:
Some attributes play the role of boolean variables (e.g., the selected attribute for the OPTION element). Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".
Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").
If you are purpose is validation and using jquery then you might need to use "change" event rather than "click".