I have an input type of radio, when using Angular to wire up the backend. However, it is currently allowing multiple selections, which is completely odd since radio is by default single selection.
<div ng-repeat="s in survey">
<input type="radio" data-ng-model="s.isSelected">{{s.id}}
</div>
Has anyone run into this, or notice something I am missing?
Assign a name attribute with the same value to all radiobuttons in the same group.
ex:
<input type="radio" name="group1" data-ng-model="s.isSelected">{{s.id}}
Related
I got radio inputs, rendered using the structural directive ngFor.
<form>
<label *ngFor="let user of staffMembers" class="stuff" for="user.username">
{{user.username}}
<input type="radio" [name]="user.username" [value]="user.username">
</label>
</form>
I got the inputs correctly but i can check multiple fields like checkbox. It's not the default behavior for radio inputs.
Because you are creating a new radio group with each line, not a new radio option. The input [name] is the name of the radio group, NOT the option.
<form>
<label *ngFor="let user of staffMembers" class="stuff" for="staffMembers1">
{{user.username}}
<input type="radio" id="staffMembers1" name="staffMembers" [value]="user.username">
</label>
</form>
The name shouldn't be unique to get the normal behavior, otherwise, it's just radio with only one possibility.
<input type="radio" name="user" [value]="user.username">
You need to give all radio inputs the same name:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
Right now it seems each radio input gets a different one since user.username is always different.
Default tab indexing is NOT working with radio buttons, working fine with any other HTML component e.g. checkbox, textbox etc.
Below basic code not working for radio button tab index but working fine with checkbox.
<div class="box">
<input type="radio" name="rdgroup">H
<input type="radio" name="rdgroup">E
<input type="radio" name="rdgroup">L
</div>
<div class="box">
<input type="checkbox" name="ckgroup">W
<input type="checkbox" name="ckgroup">O
<input type="checkbox" name="ckgroup">R
</div>
https://jsfiddle.net/wtyg7cLz/
Thank you :)
Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group....
When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.
Focus can move to a radio group via: The Tab key An Access Key or
mnemonic targeting the label Activation of the label (through
Assistive Technology mechanism)
The Tab key moves focus between radio button groups and other widgets.
When focus is on the group and when no radio button is selected: Tab
key press moves focus to the first radio button in the group, but does
not select the radio button. Shift+Tab key press moves focus to the
last radio button in the group, but does not select the radio button.
Source: https://www.w3.org/wiki/RadioButton
As #Just Code said:
When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.
For radio buttons as a group if they have the same name then changing focus will work or navigate with arrow keys like (right, left, up, down).that is the default behavior of radio buttons, it is better to leave it as default. If you prefer tab control then i guess you have to implement it with javascript, because if you give them different name user can select all different radio buttons
enter code here
<div class="box">
<input type="radio" name="rdgroup" tabindex="1">H
<input type="radio" name="rdgroup" tabindex="2">E
<input type="radio" name="rdgroup" tabindex="3">L
</div>
<div class="box">
<input type="checkbox" name="ckgroup">W
<input type="checkbox" name="ckgroup">O
<input type="checkbox" name="ckgroup">R
</div>
you could use the tabindex attribute to get a workaround after the first radio button element gets focused the user can then use the arrow keys (default) to select the desired option.
kindly check the below link for more details.
https://www.w3schools.com/tags/att_global_tabindex.asp
I'm looking for a solution to generate multiple forms on one page, that contain the same checkboxes and fields. For now, when I create those forms, even if I use different form names, all checkboxes with the same name get checked at the same time.
What I am trying to do is the following. I do have an events-list. Every event should have a form attached. Every form has some text and some checkboxes. But when I'm trying to check some boxes in my second form, it jumps to the first one (because of the same name of the checkbox).
<form method="post" name="form1">
<input type="checkbox" name="checkbox1" />
<input type="checkbox" name="checkbox2" />
</form>
<form method="post" name="form2">
<input type="checkbox" name="checkbox1" />
<input type="checkbox" name="checkbox2" />
</form>
Is there a way to get this working? Or do I have to use unique checkbox names, even if the formnames are unique? Which would make it more complex when I have a variable count of forms / events.
You can dynamically bind form elements i.e checkboxes. Don't include it in HTML code. This can be done with Jquery $.html() function to bind checkboxes to forms at runtime.
I guess this happens because form1 overrides form2 elements due to same names and id of checkboxes.
Or Try to use 4 different id of all checkboxes, and different id's of form names.
Hope it may work.
Happy Coding!
Atul Jindal
I have form that has rows which send data in array. Everything works ok, only problem is with radio buttons, when I want to edit data, they are printed with checked=checked attribute, but all browsers only register last ckecked radio button. I have tried everything I can think of, not even hack with jQuery works and jQuery does the same.
<input type="radio" name="targets[image][0]" value="/images/Targets/target2.png">
<input type="radio" name="targets[image][0]" value="/images/Targets/target1.png" checked="checked">
<input type="radio" name="targets[image][0]" value="/images/Targets/target3.png">
<input type="radio" name="targets[image][1]" value="/images/Targets/target2.png">
<input type="radio" name="targets[image][1]" value="/images/Targets/target1.png" checked="checked">
<input type="radio" name="targets[image][1]" value="/images/Targets/target3.png">
When I submit the form, then it sends only last radio as checked. Any idea how to solve this?
EDIT: For handling submit there is simple PHP script that handles $_POST
I dont want to selecte multiple values for one group, but it seems that it takes all those groups as one group, its like it ignores index in array [0]
The attribute is just "checked". You don't need "checked=checked".
Try this:
<input type="radio" name="targets[image][0]" value="/images/Targets/target1.png" checked>
No solution that I tried seemed to work, so I have reorganized my js file and now my jQuery hack works, so for anyone with similar problem, try:
$('[checked=checked]').each(function(){
$(this).click();
});
Personally I dont like this solution, feels unprofessional, but it works and I have to have radio buttons there.
I'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?
EDIT: Yeah, I suppose I should have been more specific. I tried doing
<input type="radio" />
and stuff, but:
it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
it won't let me deselect a button after it's pressed!
EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.
Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:
<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>
Works fine for me. Demo
Edit:
1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.
2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.
If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:
<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">
<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">
Note that the name attribute is the same for the group of options, which means that the selections will replace each other.
Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.
You can try this:
HTML
<div>
<ul>
<li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
</ul>
</div>
DEMO
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.