I'm trying to use Ryan Fait's custom checkboxes. These are much more readable than the standard checkboxes, but clicking on them does not run the associated onClick functions. Any advice will be appreciated. The relevant portion of my code follows:
<p style="font-family:arial; font-size:large">
<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> 0 (ages 5-7)
<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked> 1 (beginner)
<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked> 2 (easy)
<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked> 3 (intermediate)
<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> 4 (challenging)
<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> 5 (hard)
<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> All
<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>
From Styling Checkboxes and Radio Buttons With CSS and JavaScript on Ryan Fait's site:
How does it work?
In a nutshell, the JavaScript looks for every form element with
class="styled" on it; hides the real form element; sticks a span tag
with a CSS class on it next to the element; and, finally, mouse events
are added to the span that handles the visual stages form inputs go
through when they are clicked.
Your inline onClick handlers are not firing because your checkboxes aren't actually being clicked. Ryan explicitly says that it "hides the real form element; sticks a span tag with a CSS class" ... so you are actually clicking on the <span> that Ryan's code inserted; the real checkbox is hidden.
Later in the article, Ryan says outright:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because
these events can only be used once, if you want to add more functions
to an event, you will need to call them from inside my script.
You will need to call them from inside my script
Take your onClick= out of the <input> tags; add your code to his code -- you'll have to figure out which bit of your code to call from his code, since I see you're doing different things from your onClicks.
You should also take your style="..." out of your tags and use a stylesheet, but that's a separate issue.
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.
Cloning forms in jQuery, for example to create an RSVP option on a guest list with multiple people, is relatively simple.
$(selector).clone().insertAfter(selector:last)
It's relatively easy with inputs as well, offering the ability to copy methods or properties by passing true to the clone() method. To cope with multiple inputs you can append [] to the end of your input names:
<input type="text" name="email_address[]"/>
However this becomes more complicated with <input> elements of type radio, as you would usually use these to denote a choice:
<input type="radio" name="choice" value="1"/> <input type="radio" name="choice" value="2"/>
Adding the square bracket syntax further confuses things, as there are still multiple values, and some browsers may now allow different selections:
<label>Person:</label> <input type="radio" name="choice[]" value="1"/> <input type="radio" name="choice[]" value="2"/>
<label>Person:</label> <input type="radio" name="choice[]" value="1"/> <input type="radio" name="choice[]" value="2"/>
How can we solve this in a way which allows easy cloning whilst not making radio buttons hard to parse on the back end?
Turns out this can be achieved with a little bit of RegEx fun!
Firstly add a numeric value to your first input element:
<input type="radio" name="choice[0]" value="1"> <input type="radio" name="choice[0]" value="2">
Now in your JavaScript
$(selector).clone().insertAfter(selector:last)
.find('input[type="radio"]').each(function(){
var name=$(this).attr('name');
$(this).attr('name',name.replace(/([0-9]+)/g,1*(name.match(/([0-9]+)/g))+1));
});
Which creates a simple increment in numbers for each element in line with their siblings.
I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)
Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example
I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);
Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!
Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice
Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->
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.