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.
Related
I am doing a django project.
But I wanted to have radio buttons grouped as well as name of the buttons to work with django.
Is it okay to use two name attributes in one HTML tag?
Will I be facing any errors if I do so?
Below is my code I am stuck in.
<input type="radio" name="group1" name="removePunc"> Remove Punctuations
<br>
Input name attributes must be unique to send data using traditional forms. If you find yourself needing more attributes, use the data- attributes. Pls share some code to undertand what you are trying to achieve.
If you want to label the group of radio buttons add class="group1" to all of the radio buttons instead of name="group1".
<label for="removePunc">Remove Punctuations</label>
<input type="radio" class="group1" name="removePunc">
<label for="button2">Button 2</label>
<input type="radio" class="group1" name="button2">
<label for="button3">Button 3</label>
<input type="radio" class="group1" name="button3">
I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
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 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}}