Clean and accesible Other option (Check box and text box) - javascript

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.

Related

How to extend a Django forms ChoiceField to also accept text and search for close matches to avoid having to find something in a long list

I'd like to improve the usability of a form that I have that allows the user to select an area which can be highlighted on a map.
I want to retain the drop-down list for the user to browse but also for them to be able to type in the field as free-text and have a part-match on their input and filter the list to items that resemble their input.
Some of the entry's are quite long and a few words, eg. ideally "Middlesbrough South and East Cleveland" would appear in the list as the user inputs "Cleve" along with any other close matches.
The page looks like this at the moment
I have a simple Django form:-
class ConstituencyForm(forms.Form):
description = "Use the dropdown to select an area:-"
lstRandom = [(0, 'Random')]
lstChoices = lstRandom + list(constituency.objects.values_list('id', 'name'))
ConstituencySelection = forms.ChoiceField(choices=lstChoices, widget=forms.Select(),required=False, label="")
The form is instantiated and passed in this extract from the view:-
frmCons=ConstituencyForm()
if not request.GET.get("ConstituencySelection") or int(request.GET.get("ConstituencySelection"))==0:
intConsId = random_cons_view()
strConsType = "random"
else:
intConsId = int(request.GET.get("ConstituencySelection"))
strConsType = "selected"
objCons=get_constituency_view(intConsId)
context={
"consform" : frmCons,
"consgeom" : json.loads(objCons[1]),
It appears here in the template:-
<form method='get' action=''>
Select an area:-<br>
{{ context.consform }}<br><br>
Select a maptile:-<br>
{{ context.tileform }}<br><br>
<input type="submit" value="Update" >
</form>
I'm researching as best as I can, but struggling to piece together how to make this change.
Something like:-
-Change the Form field type to a type that accepts choices and free-text (like a combo field in MS
Access)
-Use a filter with "title__contains" in the view? Can I still keep all the choices in the form object?
-Use JavaScript to recognise a key-up event in the field and refresh the list? I'm not at all skilled in JS but would like to give it a go.
What are the steps I need to take and how would it be coded?
Please could you help me to achieve this? Many thanks to a great community,
Phil
I have managed to get something working in the end having taken a course in JS.
Ultimately, html alone won't get close to combining a select input with a text input in a single control.
A combination of a text input right above a select input with appropriate java script events to synchronise the select with what the user types in the text input is close enough in my opinion.
The event listener responds as follows:-
On text input keyup (the user is typing looking for a part match) - go through the select options array and set hidden to true or false as the input string develops to increasingly filter the list using a non case-sensitive includes method on each option label. The size property of the select input is also dynamic showing between 1 to a maximum of 5 options based on the options remaining.
On select input change or click (the user selects an option), a separate read-only text input is set with the value of the selected option and the user can click on a corresponding button to find the data for that option.
On clicking a clear button: the options in the array have their hidden property reset to false.
There are a few other bits I added to improve functionality - eg use a regular expression to break a input with punctuation into multiple part matches and look for both but this is contextual for the use-case.
The code is quite lengthy and bitty so I've attempted to explain this solution contextually assuming appropriate JS knowledge. I'd be happy to provide more detail if anyone has a specific use case they'd like support with.

Javascript issue- Cannot Submit form after document.getElementById

document.getElementById("hs-search-origin").value = myloc;
I am successfully writing the value in a Text Box
The text box is attached to a searchbox and up on clicking the search button, search is not happening.
I have to edit the textbox, like remove character or add character in the text box, to make it work.
For Ex:
myloc="i love stackoverflow";
document.getElementById("hs-search-origin").value = myloc;
The text box shows the value i.e "i love stackoverflow" but on clicking the button, nothing happens.
I have to either edit the text in the textbox and then click on search to make it work. What is the issue, any guess
You have some code which runs (and does a search) when the user changes the value of the text box.
It doesn't run when you change the value with JavaScript.
You need to call that code explicitly when you want it to fire in response to something else than the user typing.

Allow a user to click off select2 and keep free text

I currently have a select2 dropdown, version 4.0, that allows the selection of items as well as free text to be typed.
$("#dropdown").select2({
placeholder: "Select or enter a new item",
allowClear: true,
tags: true
});
I understand that typing free text creates a new option that can be clicked or will appear as an entry if the return key is pressed.
However clicking the newly entered option or hitting return are the ONLY ways for it to be accepted. This seems a little unintuitive as I know users will want to click onto other form elements or tab through the form.
Is there a way to allow a tag to be created just from de-focusing the form element?
I'm thinking something along the lines of having a .blur() event fire a selection or have select2:close cause a selection but I can't quite put it together.
It sounds like you are looking for the selectOnClose option. This will select the highlighted option when the drop down is closed.

Keep all three select elements enabled always

I have a search box as in below
http://www.carsguide.com.au/
When I select "All new cars", the "All used cars" gets disabled. The same happens when one select "All used cars". I need all three to stay enabled always so user can chose any .
$(".searchtype-option.disabled input").removeAttr("disabled", "disabled");
I am thinking of a solution as above
However I need it such that no matter what option is selected, the disabled tag is removed.
I don't know much about how you want to use this, but if want them to stay enabled, just don't disable them.
However the correct jQuery code, in this particular example would be:
$(".searchtype-option.disabled").removeClass('disabled')
.find('input').attr('disabled', false);
This will enable the input field and remove the "disabled" class from the label.

Re-enable radio inputs with a clear function

I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.
Screenshot:
The Goal:
I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:
// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Issue:
This code seems to be working, with a couple of quirks.
The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't happen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).
There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.
Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:
When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.
Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/
From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.
A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.
An even better way than that, use jQuery to create a sortable list.
http://jqueryui.com/demos/sortable/
-Sunjay03

Categories

Resources