hide textfields instantly when check a radio button - javascript

What I want is when the user chooses the first option the textfield will disappear and when the users chooses the second the textfield will appear again instantly. Here's some code:
<input type="radio" name="RadioGroup0" value="1" id="student" />
<input type="radio" name="RadioGroup0" value="0" id="not student" />
and want to hide/show this:
<label for="department">department:</label>
<input name="department" type="text" class="label" value="" />
I have tried anything so I'll appreciate any answer

On the click, keyup, and change events, show or hide the appropriate elements (jQuery makes this easier). The reason for handling all the events is that the value change may only be triggered after the element loses focus.
Happy coding.

Related

Accessible radio input, triggers onChange event by Space or Enter key

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.

How to use tabindex and arrow key over group of radio and input fields

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.

Hide/display textbox as well as its label withouth knowing ids

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/

jQuery live span not updating until a second click

To check this out please go to http://offline.raileisure.com/
on the right hand side the booking section, choose station masters house, then choose a check in date of 15 August. then choose 4 days...
OK
Now go back and choose a different date of 29th August.
The 4 days should deselect, but it doesn't until you do a further click anywhere else...
I think I need to be updating a live attr. but not sure.
to untick #spanduration I am using:
$('input[name="duration"]').removeAttr('checked');
$("#spanduration").attr("style", "background-position: 0px 0px;");
but it is not working until you do that second click anywhere.
Maybe it because its a radio button.
Try to change it to a checkbox?
Radio button dont like to be unchecked if none other is checked:
<input type="radio" value="0" name="duration">
<input type="radio" value="1" name="duration">
<input type="radio" value="2" name="duration">
<input type="radio" value="3" name="duration">
And standalone
<input type="radio" value="0" name="other_name">
On the other hand checkboxes uncheck each other: (note the name is array like)
<input type="checkbox" value="0" name="duration[]">
<input type="checkbox" value="1" name="duration[]">
<input type="checkbox" value="2" name="duration[]">
<input type="checkbox" value="3" name="duration[]">
And standalone
<input type="checkbox" value="0" name="other_name">
You can write something like this to have the ability of a standalone checkbox and also the sweetness of grouped radio-buttons: http://jsfiddle.net/LJJrZ/
$(document).ready(function(){
var selector = "input[type=checkbox]";
$(selector).click(function(event){
var checked = $(this).is(':checked');
if ( checked ) {
$(selector).attr("checked", false);
$(this).attr("checked", true);
}
});
});
The change event doesn't fire on a text input until the input is blurred.
You could try to manually blur the input after the date is populated (not great for accessibility). Or better yet, manually trigger the change event yourself after the date is populated. e.g.
//...
// After date is populated
$('#date').trigger('change');
//...
See full example here: http://jsfiddle.net/irama/rJGpn/
EDIT: Looking at your code, it looks like there's an opportunity (when you instantiate the datepicker) to insert this into a callback function:
$('#date').datepicker({
// ...
onSelect: function (e) {
// ...
$('#date').trigger('change');
}
// ...
Let us know how you go!

Why am I submitting the form twice? jQuery submit() with radio button

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego
You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});
You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.

Categories