I am very new to coding and CS and so sorry if this question is kind of obvious. I couldn't really find anything about this before that I understood. I am making a set of radio buttons and I would like the user to check off what applies to them and submit it. How do I get the value of the button (with javascript) that they click so that my code could generate a corresponding output.
<p> Pick a hair length </p>
<input type="hidden" value="" id="rdValue" />
<div>
<label> <input type="radio" name="length" value="short"> Short </label>
</div>
<div>
<label> <input type="radio" name="length" value="med"> Medium </label>
</div>
<div>
<label><input type="radio" name="length" value="long"> Long </label>
</div>
<p> Pick a hair type </p>
<div>
<label> <input type="radio" name="type" value="curly"> Curly </label>
</div>
<div>
<label> <input type="radio" name="type" value="wavy"> Wavy </label>
</div>
<div>
<label><input type="radio" name="type" value="straight"> Straight </label>
</div>
You could use this to get the value for the selected radio button from the "length" radio buttons for example:
$("input:radio[name='length']").val();
This question is very similar to yours, and has answers in jQuery and Javascript. It's pretty simple.
Basically, you get the DOM elements of the radio buttons from the page, then loop through them checking their values. Once you find one that is "true", you've found the selected value.
Related
I have been reading the MDN <input type="radio"> element documentation. I want to make accessible radio buttons. So, I want a user to be able to tab through each radio button, and when they press space or enter to trigger the onChange event and make the radio button selected.
Here is my code:
<fieldset role="radiogroup">
<legend>Type of radiation:</legend>
<div>
<label htmlFor="radio1" tabIndex=0}>
<input type="radio" name="rad" value="1" id="radio1"
onChange={() => console.log('test')} />alpha
</label>
</div>
<div>
<label htmlFor="radio2" tabIndex={0}>
<input type="radio" name="rad" value="2" id="radio2"
onChange={() => console.log('test')} />beta
</label>
</div>
<div>
<label htmlFor="radio3" tabIndex={0}>
<input type="radio" name="rad" value="3" id="radio3"
onChange={() => console.log('test')} />gamma
</label>
</div>
</fieldset>
But it's not working. I can focus the element, but when I press Enter or Space nothing happens.
You should not do this. If you’re already using native input elements, you are fine!
The misunderstanding here is about how to select radio buttons by means of keyboard: It’s the arrow keys.
Users can jump from one group of radio buttons (with the same name) to the next by means of Tab. Selecting a radio button from the group is done by means of arrow keys.
Of course, you cannot unselect a radio button. But if the first one receives focus and none is checked yet, you can check it with Space and Enter.
See Keyboard Interaction for radiogroup on MDN
You already wrapped the group inside a <fieldset> with <legend>, which is great! You have labels associated with the radio buttons. Looks like you’re all set!
Go ahead, try it:
<fieldset role="radiogroup">
<legend>Type of radiation:</legend>
<div><label for="radio1"><input type="radio" name="rad" value="1" id="radio1" />alpha</label></div>
<div><label for="radio2"><input type="radio" name="rad" value="2" id="radio2" />beta</label></div>
<div><label for="radio3"><input type="radio" name="rad" value="3" id="radio3" />gamma</label></div>
</fieldset>
I dont have enough rep to just add a comment, but have you tried changing tabIndex={0} to tabIndex="0"?
found this here: https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966
If you need to use a non-focusable HTML tag for an interactive element for some reason, you can make it focusable with the tabindex="0" attribute. For instance, here’s a turned into a focusable button:
<div role="button" tabindex="0">
Click me
</div>
The role="button" attribute in the above snippet is an ARIA landmark role. Although keyboard-only users don’t need it, it’s indispensable for screen reader users and visual accessibility.
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
I know this is a common question on SO, but none of those solve my issue.
This code doesn't allow me to click/select the radio button. And I am unable to see whats wrong. It may bey something simple that I am missing, I'll be glad if someone can help out.
<div input-field class="col m6" ng-init="student.username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="0" required />
<label>Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="1" required />
<label>Auto Generate</label>
</p>
The problem is I cannot select the Radio button, where set in ng-init or not.
JSFIDDLE: https://jsfiddle.net/znfvmr80/5/
Well the fix was relative easy, and kinda due to me missing out on a for attribute. Thanks to #Joyson for helping out, him thinking got me thinking.
This is the correct code:
<div input-field class="col m6" ng-init="student_username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="0" required id="same_as_reg" />
<label for="same_as_reg">Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="1" required id="autogen" />
<label for="autogen">Auto Generate</label>
</p>
Materialize requires a for attribute label for radio buttons to work.
Thanks everyone!
The code you have given is working fine i think you could check more in your js before or after initialization.
I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.
I'm currently building a table with several cells containing a radio with a series of textboxes.
I want each radio to make a textbox appear when clicked as well as the textbox label. Here is something that's working when knowing id for label or radio (the problem is reduced to what's inside one table cell):
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" id="+QuestionID+_1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" id="+QuestionID+_0" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
<input type="text" name="textarea" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class="labelhide" id="Test1">Test</label>
<input type="text" name="textarea1" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class=labelhide id="Test2">Test</label>
<br />
</div>
and here is the JS
$('input[type="radio"][name="radio1"]').on('change', function() {
$('input[type=text]').toggle($.trim(this.value)=='1');
document.getElementById("Test1").style.display = 'inline';});
http://jsfiddle.net/Onysius/5WF25/2/
I'd like to have the same kind of behavior for the radio except I want it to toggle on only the 1st next textbox with its label without having to enter the corresponding name or id of the radio (table is generated by a python script with many textboxes under many radios so I don't want to create a specific function for each radio), textbox or label. The overall shape as to stay the same also (namely textbox below radio).
Is there a way to do that with a general form JavaScript (additional css is permitted-it currently uses a none display option for label class) ? To be clear my only trouble right now are the last 2 lines in the JS (I could easily set no name for the radio in the first line to apply it to any radio in the table) I don't actually know how to target just the next textbox after the radio with its associated label.
Any help will be greatly apreciated.
I think you need to do something these lines to inject the textarea you want dynamically next to the item and retain the the name for tracking what comments goes to which radio and not having to create a textarea for each radio:
HTML:
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
</div>
Javascript:
$('input[type="radio"]').on('change', function() {
var name=$(this).attr('name')
var html='<input type="text" name="textarea" style="width:80%;" id="comment_'+name+'"><label for "comment_'+name+'">Test</label>';
$('input[name="'+name+'"]:last').next('label').after(html);
});
Demo:
http://jsfiddle.net/SzjL2/