I have a feedback form where I am asking users for a reason for cancellation, something like this:
label {
display: block
}
button {
display: block;
}
<form>
<fieldset>
<legend> Reason for cancellation? </legend>
<label>
<input type="checkbox"> Reason 1 </input>
</label>
<label>
<input type="checkbox"> Reason 2 </input>
</label>
<label>
<input type="checkbox"> Reason 3 </input>
</label>
<label>
<input type="checkbox"> Reason 4 </input>
</label>
<label>
<input type="checkbox"> Other </input>
</label>
<textarea aria-label="other reason"></textarea>
<button> Submit </button>
</fieldset>
</form>
The textarea is related to the Other checkbox, i.e, it only gets activated if the user selects the Other option, otherwise it remains disabled
How do I represent that association in markup?
Should I group the checkbox and the textarea using another fieldset? I am not sure if this is semantically correct, and also in general this is discouraged.
https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/#:~:text=It%20is%20possible%20to%20nest,fields%20belong%20within%20which%20fieldset.
Should I use something like aria-controls or aria-owns?
Would it be enough to just mention Other (Please fill the reason below) in the checkbox label, so that when the label is announced, the user can get to know that there is a textarea just after the checkbox which can be reached by tab
It might also be ok to change the UX to always allow the user to optionally fill in the text area for any of the selected reasons , so the text area can be part of the same fieldset and can be enabled all the time
NOTE:
I have seen some examples, specifically Google Forms, and Search Engine Journal.
Google forms solves this issue by placing the textbox next to the checkbox, the textbox is always enabled, and as soon as you focus on the textbox, the checkbox gets automatically checked.
Search Engine Journal, does not explicitly associate the controls, but they do mention it in the checkbox label, to fill in the reason below.
Answer on using ARIA
You can use aria-controls, it seems like a good fit for your case.
it looks more appropriate than aria-owns, see this question about difference between aria-own and aria-controls.
However, screen reader support is quite inconsistent, and even if it is supported, it's at the end quite rarely known and used by screen reader users.
Therefore, in addition, it's always good to add a precision in clear text like you suggest e.g. "Other reason (please explain below)". Adding that indication in the label of the checkbox is a good choice.
This added precision will anyway never by harmful to anyone, so you have no reason not to do it.
Answer on the UX design
If you have added the precision "please explain below", there's really no problem in enabling the textarea depending on the checkbox.
Simply, make sure that the textarea come after the enabling checkbox in tab order, so to ensure that the user won't miss it and won't need to go back and forth to fill it in.
Unless you have a weird design, it should normally already be the case.
The other alternative, checking the checkbox automatically when entering a reason is equally no problem, but you need to be more carful on when you do it:
Don't check the checkbox on focusing the textarea, otherwise keyboard only users will trigger it when they don't want to, and even normal users may click on the textarea and then change their mind
Don't check the checkbox on entering a character in the textarea. It's probably a bad idea because I may start typing something, and finally clear everything and change my mind
What about checkign the checkbox when the textarea loses the focus while being non-empty ?
You may, optionally, show a snackbar or something like that with aria-live=polite, telling that the checkbox as been checked automatically because you ahve entered something.
This kind of bonus indication on things modified automatically would be quite useful in more complex forms, but for your case as it is presented here, it's totally superfluous because the relationship is obvious.
You could just hide the textarea by default and let it show up with a small javascript to toggle a class to set display to block.
<body>
<form>
<fieldset>
<legend> Reason for cancellation? </legend>
<label>
<input type="checkbox"> Reason 1 </input>
</label>
<label>
<input type="checkbox"> Reason 2 </input>
</label>
<label>
<input type="checkbox"> Reason 3 </input>
</label>
<label>
<input type="checkbox"> Reason 4 </input>
</label>
<label>
<input type="checkbox" class="otherCheckbox"> Other </input>
</label>
<textarea aria-label="other reason" class="otherTextarea"></textarea>
<button> Submit </button>
</fieldset>
</form>
</body>
<script>
let otherCheckbox = document.querySelector(".otherCheckbox")
let otherTextarea = document.querySelector(".otherTextarea")
otherCheckbox.addEventListener("change", e => {
otherTextarea.classList.toggle("show")
})
</script>
Added to css:
.otherTextarea {
display: none;
}
.show {
display: block;
}
Related
I have been trying to get this working for more than a week now, searching endlessly for the solution and I can't figure out what I'm doing wrong. I am not a coder, just trying to duct tape some functions together to get this working... Please help!
I have the following checkbox inputs on my Contact Form 7 form inside a Wordpress page. I have Mailchimp for Wordpress updating a group which reflects the visitors interests. I'm trying to get the value of the group assigned to a hidden input field so that the built in mail feature and other Zapier integrations can use the interest values. Most of these apps seem to lack support for the groups functionality inside Mailchimp.
The form html is as follows:
<p>
<label>Which Are You Most Interested In?</label></br>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"
required=""><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"
required=""> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"
required=""> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in"</input>
--
I've tried several variations of this including some inline stuff, putting the code in the top or bottom of the page, putting it into the Additional section of Contact Form 7, putting it into a scripts plugin inside wordpress, trying to see if it's an array thing and trying code for pushing from array (more over my head) and so many others. Here is what I'm basically trying to do, albeit wrongly via this code because obviously it is not working...
JS:
$('form').submit(function() {
$('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').change(function(){
$('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').val());
});
--
Online there is not much support for Mailchimp groups, and I suspect groups functions of most contact apps, not even with paid plugin feature. Mailchimp for Wordpress has the most support I could find and you still have to do some tinkering to get it working. I'm soooo ready to know what the heck works instead of all the stuff I've been trying! Thank you in advance. I really appreciate it!
Wordpress disables the $ shortcut, so you need to either replace $ with jQuery or wrap your code:
(function($){
// your code here
})(jQuery);
Plus, the name of those checkboxes doesn't contain a hashtag. I also have no idea what you're doing with those dots and linebreaks there.
In addition, you're assigning a onchange handler only when the form is submitted, but you'll want that to work from the start instead.
Here's a solution that sets the onchange handler to grab the value from all checked checkboxes and puts it into the hidden input.
var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';
(function($) {
$(selector).change(function() {
var interests = Array.from(document.querySelectorAll(selector))
.filter(e => e.checked).map(e => e.value).join(",");
$('#int-in').val(interests);
console.log("set to", interests);
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>Which Are You Most Interested In?</label><br/>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in">
<input type="submit">
</form>
Say i have these radiobutton, i make a click function localClick and for first button it should have 1 and second give value 2
<div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group1" value="Remote" label="Remote" (click)=localClick(2) ></p-radioButton></div>
now i want my input field
Example
<input id="pass" type="text" style="width:80%" disabled="exampleFlag" pInputText [(ngModel)]="password">
I googled a bit and added this thing, disabled=exampleFlag and now in the ts file i set it to true or false based on which radiobutton was clicked so i do
exampleFlag=false; // set it to false initially so box is not disabled
localClick(x) {
if(x==1){
this.exampleFlag=true;
}
else{
this.exampleFlag=false;
}
}
basically what im doing here is that if the first radiobutton is clicked then set it to true (so that the box will get disabled) but otherwise it should be enabled whether no buttons are selected or whether the 2nd radio button is selected.
I am new to this but i googled aa bit and came up to solutions like this however for me the box always stays disabled no matter what i do.
I think the mistake im making is the way the (click) thing is being defined in html file and maybe in the ts file also but im not sure.
Wrap disabled in square brackets to bind it to an attribute value.
<input id="pass" type="text" style="width:80%" [disabled]="exampleFlag" pInputText [(ngModel)]="password">
Slightly odd question, but I'm trying to find a way (if possible) to select all radio buttons that have the same value. We regularly get hundreds of spam accounts signing up on our website, and it would be easier to set all radio buttons to "Reject" and double-check to make sure there's no legitimate ones, as opposed to constantly clicking on a radio button. (Lazy is my middle name, yes.)
Is this possible? If so, how? I haven't got access to the actual web pages to code in a button to do just this yet, but it's something I'm looking at long term. Right now though, I need something quick and dirty to do what I want it to do. I'm using Chrome, and can use Greasemonkey if that's required.
The value to select by is "reject".
A snippet of code that's being used. If it's of any consequence, our forum is running Xenforo:
<li>
<label for="ctrl_users16667action_reject">
<input type="radio" name="users[16667][action]" value="reject" class="Disabler" id="ctrl_users16667action_reject">
Reject and delete with rejection reason:
</label>
<ul id="ctrl_users16667action_reject_Disabler" class="disablerList">
<li>
<input type="text" name="users[16667][reject_reason]" value="" size="45" placeholder="Optional" class="textCtrl" id="ctrl_users16667reject_reason">
</li>
</ul>
</li>
You're looking for a bookmarklet or a GreaseMonkey (or TamperMonkey or similar) script.
Re bookmarklets, you can use the javascript: pseuedo-protocol to run script on the page you're looking at from your bookmarks manager. Just make the URL in your bookmark:
javascript:(function() { /* ...your code here ...*/ })();
Because it has to be URI-encoded, you can find "bookmarklet generators" out there to handle that part for you.
Alternately, there are GreaseMonkey, TamperMonkey, and similar add-ons/extensions for browsers.
Then it's a trivial matter of selecting the relevant radio buttons:
$('input[type=radio][value="reject"]').prop('checked', true);
So if jQuery is already loaded on the page in question, you could use this as a bookmarklet:
javascript:(function(){$('input[type=radio][value="reject"]').prop('checked',true);})();
Use :radio to get radio buttons, then for filtering use attribute equals selector
var $ele = $(':radio[value="reject"]')
or filter()
var $ele = $(':radio').filter(function(){ return this.value == 'reject'; });
FYI : It's a jQuery solution and it only works if you are loaded jQuery library in the page.
Try this it will work
$("input:radio[value=reject]")
you have to give unique name to all radio buttons then you can select multiple radio buttons using javascript
you have to give same class to radio button
<input type="radio" name="radio[]" class="my_class" value="1" />
<input type="radio" name="radio[]" class="my_class" value="1" />
<input type="radio" name="radio[]" class="my_class" value="0" />
$(".my_class").each(function(){
if($(this).val() == "1"){
$(this).attr('checked','checked);
}
});
Thanks
Is it possible to have a CheckboxColumn in a grid panel that can be checked on only one row at a time ?
I've tried Googling what I'm looking for and I'm not finding much.
Do I need to do something at the store level and at the grid level ? I'm halfway through coding a logic that does it using the checkchange event, but I wondered if I'm writing useless code :)
Thank you.
Your best option as suggested in the comments is to use radio buttons.
The key is to give them all the same name. For example:
<form>
<input type="radio" name="firstname" id="Fred">
<input type="radio" name="firstname" id="Joe">
</form>
Then, when one of these radio buttons is selected, any other radio button with the same name will be unselected.
I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.