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/
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.
I have a form similar to as shown below. There are group of radios and input field corresponding to it.
Condition it should follow
first tab index select first radio of group 1. Incase selection has to be changed i can use arrow key
second tab index should select first radio from group 2. Incase selection has to be changed i can use arrow key
while in group 2 if i press tab again it should focus on textbox corresponding to radio
pressing tab again should take focus to group 3 textbox
All of above condition are working except when first radio of group 2 is selected. pressing tab does take it to corresponding textbox. But on again pressing tab it goes to another textbox of group 2 (which should not happen).
Please help. HTML code as below
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount"> $<input type="text" tabindex="2.1"><br>
<input type="radio" name="payment" tabindex="2" value="installment">#<input type="text" tabindex="2.1">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html>
<< Try pressing tab key when cursor is at postion as shown in the image >>
Since your post is tagged with javascript, I assume javascript is allowed. Disabling the input-field will prevent 'tabbing' to it. So disable the text-field after the '#' by default (by adding disabled="disabled") and add onchange-events to the radio-buttons to disable the text-field after '$' and enable the text-field after '#' (and vice versa).
onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "
And add the proper id's to the text-field, so the javascript-selectors will work.
Full code:
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount" onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "> $<input type="text" tabindex="2.1" id="amount"><br>
<input type="radio" name="payment" tabindex="2" value="installment" onchange="document.getElementById('amount').disabled='disabled'; document.getElementById('installment').disabled=null; ">#<input type="text" tabindex="2.1" disabled="disabled" id="installment">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html>
You could set tabindex="-1" with JavaScript on the not selected textbox, therefore this textbox will be ignored in the tab order by the browser. Then you can get rid of all those manual tabindex definitions as well, because the browser will already follow the desired tab order by default.
Hi im at coding a form and i needed a validation form for my radio and checkbox inside my form so i searched around the net and found out that jquery 1.3+ has class="required" tag that does exactly what i wanted but
i have this section of radios :
<label class="label" type="radio" name="sloganch" >Does your slogan need to be incorporated in your Logo Design ?</label>
<div class="inline-group">
<label class="radio"><input type="radio" name="radio-inline" class="required" ><i></i>Yes</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>No</label>
<label class="radio"><input type="radio" name="radio-inline"><i></i>Maybe</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>I decide later</label>
</div>
And if i put the class="required" on the first radio when it calls this function it distort my radios by attaching " This field is required" to my first radio
and distort the complete line of radios .
Is it possible somehow to fix this to set for eg the " This field is required" under the complete row ? thanks in advance
this should work
$("input:radio:not(:first)").addClass("test");
EDIT
This should work i have also included a js fiddle for your reference
the above code will add class test to all the radio buttons except the first
JS Fiddle
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.
I have used JavaScript to hide the divs containing form elements:
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
When certain checkbox(es) are selected the respective div(s) are shown or get visible:
<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
<div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
<div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
<div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
<div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
<br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
In the above case I have used 5 divs with five inputs, if a user selects two checkboxes and submits the form, I don't want the other 3 input fields to get submitted with empty fields. Rather ONLY selected 2 input field's value should get submitted.
You can try disabling the blank fields as disabled fields do not submit with the form.
This is not the way forms work. You need to either:
modify the value of the inputs (usually bad) or...
manipulate the DOM elements to modify what is part of the form and what is not at a structural (and not styling) level (very bad) or...
break this into multiple forms and submit the one you're interested in only or...
disregard the information you're not interested in at the server side or...
change your form design.
Without further evidence I'd go with one of the latter two.
I can think of only two ways to solve this:
Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
Slightly modified version of the previous one would be to have another hidden form, where you can move the divs when unchecked. You need to remove the elements from current form and move them back when checkbox is checked - this way, you could preserve the values user already filled into the textboxes, but when unchecked, the values won't be submitted with current form.