I have an input form that uses radio buttons arranged in radio button groups. My question is: “Can I have a radio button group with only one radio button, and have it still function as a radio button group?”
I know this may sound silly. Why use a radio button group if only one button? But I am not being difficult or making up a theoretical case. In my application code, the radio button group is dynamically generated via javascript, and is placed within a scrolling div (not shown). Suppose the radio button group is for race, and there are four buttons: white, black, hispanic, other. User deletes three of the categories, and is left with hispanic, for example. Suffice it to say I have a genuine need to (at times) have one radio button in the group.
Please do not make the understandable suggestion to use a select box or check box. I specifically need to use radio buttons to look and function much better (for this data analysis application) on mobile devices.
I believe the following source code illustrates the problem. In Case 1, the DOM thinks the radio button group is HTMLInputElement. In case 2, it is considered to be RadioNodeList (normal radio button group). Case 3 uses dummy hidden button as possible workaround, DOM considers single visible button to be RadioNodeList object.
<!DOCTYPE html>
<html>
<body>
<script>
function showInfo (case_num) {
var groupName = "group" + case_num;
var objectVar = myForm.elements.namedItem (groupName);
var str = '';
str += "Case number: " + case_num;
str += "\nobjectVar = " + objectVar;
str += "\nobjectVar.value = " + objectVar.value;
str += "\nobjectVar.name = " + objectVar.name;
str += "\nobjectVar.length = " + objectVar.length;
str += "\nobjectVar.checked = " + objectVar.checked;
str += "\nobjectVar[0] = " + objectVar[0];
str += "\nobjectVar[1] = " + objectVar[1];
if (objectVar[0] != undefined) {
str += "\nobjectVar[0].value = " + objectVar[0].value;
str += "\nobjectVar[0].name = " + objectVar[0].name;
str += "\nobjectVar[0].checked = " + objectVar[0].checked;
}
if (objectVar[1] != undefined) {
str += "\nobjectVar[1].value = " + objectVar[1].value;
str += "\nobjectVar[1].name = " + objectVar[1].name;
str += "\nobjectVar[1].checked = " + objectVar[1].checked;
}
alert (str);
}
</script>
<form name="myForm" action="">
Case 1: Single radio button in "group1" group:
<br>
<input type="radio" id="m1" name="group1" value="m1" onchange="showInfo (1);">
<label for="m1">M</label>
<br>
<br>
Case 2: Two radio buttons in "group2" group:
<br>
<input type="radio" id="m2" name="group2" value="m2" onchange="showInfo (2);">
<label for="m2">M</label>
<br>
<input type="radio" id="f2" name="group2" value="f2" onchange="showInfo (2);">
<label for="f2">F</label>
<br>
<br>
Case 3: Single visible radio button in "group3" group, with hidden button:
<br>
<input type="radio" id="m3" name="group3" value="m3" onchange="showInfo (3);">
<label for="m3">M</label>
<input style="display: none;" type="radio" id="f3" name="group3" value="f3" onchange="showInfo (3);">
<label style="display: none;" for="f3">F</label>
</form>
</body>
</html>
Since the DOM switches the object type, that complicates things. For example, RadioNodeList has a length property, HTMLInputElement does not. More fundamentally, the type is still radio, so why not still a radio button group with one node? I know I can figure out which object type by looking at the properties and going from there as a workaround. However, I would prefer that it remain a RadioNodeList even if just one radio button. Is that possible?
[Added after getting comment] Hiding or disabling buttons will not work, because the categories (eg, race groups) can be combined into "sets". For example, "white" could be combined with "other" for a new set "white / other". Each time the user carries out an action, the program needs to generate a new radio button group with the current categories and sets. Now, it is possible to have a dummy button hidden, to fool the program into thinking always GT 1 button. The dummy hidden button does work, I added to the example after getting comment, seems kludgy, but is a workaround, perhaps about the same as testing for the object type.
https://www.w3.org/TR/html52/sec-forms.html#radio-button-state-typeradio says “A document must not contain an input element whose radio button group contains only that element.” I am not sure what that means exactly, but perhaps it is saying cannot have just one radio button in group. If so, they sure have an obscure way of saying it. 😊 Anybody know situation with one radio button in group?
My best guess, when only one radio button, no longer considered a radio button group. Can someone verify this, provide suggestions / reasoning, or correct anything I might have gotten confused? Thanks
Perhaps nobody understood the question. Anyway, here is the answer, to my best understanding.
In terms of what the user sees, the answer is "yes, I can have a radio button group with only one button, and have it still function as a radio button group". You can see in the example: There is just one radio button. It starts unchecked. The user can check it. Once checked, it cannot be unchecked. No big deal. But there it is.
In terms of what the programmer sees, the answer is "no, a single radio button does not function as a radio button group, is a different object, but it can be dealt with". As shown in the example, a radio button group with only one button is HTMLInputElement object. With more than one button, it is RadioNodeList object.
Why the experts made this decision (HTMLInputElement if only one button) is beyond me. To me, it would be like my math teacher saying I could not have a set with a single element. But perhaps I am missing something. Anyway, there it is, those are the facts.
How are RadioNodeList and HTMLInputElement (the two cases) similar or different to the programmer? Keep in mind that the interface may change so that what started as several radio buttons ends as one. If the code does not take that into account, it will fail, since the objects are different.
Both objects have value property - No matter whether one or more than one radio box, value property gives string telling which box is checked. For either case, it is the value of the checked box, or empty string if no box checked. So I believe this works the same for either case.
Only RadioNodeList has length property. So if you do not test, the code will eventually crash. The test if (my_object.length === undefined) evaluates to false if RadioNodeList object and true for HTMLInputElement object (length is essentially one in that case).
Only HTMLInputElement has name property, but individual nodes of RadioNodeList also have name property, and share the same name, required for a radio button group. In either case, when the form is submitted, I believe it works the same, but I have not directly tested this.
Only RadioNodeList has a collection of nodes that you can iterate over, with NodeList.forEach() syntax or with for loop and NodeList[ndx] syntax. Try to do this with HTMLInputElement and the code will crash. If length property exists, you can iterate, otherwise just one HTMLInputElement element.
I think the best way to appreciate the differences is to look at the output from the example code, which I have further edited to add some more details. Please add any other comments if you wish, but I am not expecting anything. Thanks
<p class="uk-heading-line uk-text-center uk-text-baseline uk-h2"><span class="uk-link-heading uk-margin-top uk-link-reset">Radio button group</span></p>
<form id="form" class="uk-padding uk-width-1-1" onsubmit="return false;">
<div>
<label class=" uk-text-light uk-text-muted">Label1</label>
<div id="button-group1" class=" uk-button-group uk-width-1-1 uk-margin-small-top" uk-switcher>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-3 "><input type="radio" hidden />radio1</label>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-3 "><input type="radio" hidden />radio2</label>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-3 "><input type="radio" hidden />radio3</label>
</div>
</div>
<div class="uk-margin-top">
<label class=" uk-text-light uk-text-muted">Label2</label>
<div class="uk-button-group uk-width-1-1 uk-margin-small-top" uk-switcher>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-4"><input type="radio" hidden />radio4</label>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-4"><input type="radio" hidden />radio5</label>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-4"><input type="radio" hidden />radio6</label>
<label class="uk-button uk-button-primary uk-button-large uk-width-1-4"><input type="radio" hidden />radio7</label>
</div>
</div>
</form>
I am a newbie in html and js. I have been trying to check possible discussions about my problem, but couldn't find anything similar.
Here is my problem: I need to have two radio buttons and I would like to show different buttons for each radio button selection that could take the page further actions (i.e. if radio button A selected, show exit button, if radio button B selected show next button. In this direction, I started to create something, but I stuck at the point of creating conditional actions.
In my php file I have the following codes:
<div>
<label><input type="radio" id="noc" name="c" value="f_c" onchange="disp_button(this.checked);"> no action</label><br>
<label><input type="radio" id="co" name="c" value="t_c" onchange="disp_button(this.checked);"> take action</label><br>
</div>
<div class="header_format"><p id="hidden_field" style="display:none;" <input onclick="do_this();" type="button" class="btn btn-primary" value="Continue" />Next</button></div></p>
<div class="header_format"><p id="hidden" style="display:none;" <input onclick="do_that();" type="button" class="btn btn-primary" value="Exit" />Exit</button></div></p>
in addition to the js file, which contains the functions for php file. I defined specific function for my radio button actions like that below in my js file:
function disp_button(checked){
var button1 = document.getElementById("noc");
var button2 = document.getElementById("co");
if (button1.checked){
show_exit_button("noc radio button selected");
}else if (button2.checked) {
show_next_button("co radio button selected");
}
}
So, I would appreciate any help to put those things together. Thanks for your time.
I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)
I have a list of radio buttons on the basis of how many id in the mysql table.
when ever clock on the radio then it shows the div details
for example
radio buttons
<input name="value" type="radio" value="facebook" id="facebook"/> facebook
<input name="value" type="radio" value="google_plus" id="google_plus" /> Google plus
<input name="value" type="radio" value="orkut" id="orkut" /> orkut
divs
<div id="facebook" style="display:none;">
facebook is one of the most popular social networking website
</div>
<div id="google" style="display:none;">
google plus is the new social network
</div>
<div id="orkut" style="display:none;">
Orkut is a socila networking website powered by google
</div>
when select radio, I need to show divs on the base value="" value of the radio button.
the thing is that radio numbers and values will be on the base of mysql data
is there any option to show divs in Jquery ?
if u know help me pls
Hope, this piece of code would be of any help. here is my try to find a solution for your problem :)
$('input:radio').click(function(){
var idVal = $(this).val();
$('div').hide();
$('div[id='+idVal+']').show()
});
please find a working sample here: http://jsfiddle.net/u3AbT/3/
from what it seems like you're asking you want to know how to show a div via jquery?
.show() method
or .css() method example: $('nameOfYourDiv').css('display','block');
$('input[name="value"]').change(function(){
var id = $(this).val();
$('#' + id).show();
});