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
Related
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.
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.
I used a jquery combobox for autocompletion and I needed to clean its value.
I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
To clear just only one combo you must select it with it's id:
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
EDIT if you want to make two buttons (one for each combobox) you could do:
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/
Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:
<select class="combo">
...
</select>
Clear
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
Clear
</span>
You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
Two suggestions:
Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.
Well, in the example the following would only clear the last combobox:
$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:
$('.ui-autocomplete-input').first().focus().val('');
You can clear it in event "close" of the autocomplete
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});
How to give clear button for autocombobox please tell me
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
I am creating a form wizard that guides the user through each form element, showing a tooltip describing each element. What I am trying to accomplish is:
Keep each form field disabled, excluding the form field the user is currently filling out.
When the user wants to continue onto the next field, they need to click on the tooltip for the field they're currently on. Also, the field needs to be non-empty to advance.
I have the tooltip appearing correctly, and it vanishes upon click. What I can't figure out is how to say in JavaScript code: "Has the user entered data into the current field and clicked on the tooltip to advance? Okay, then continue onto the next field until we've reached the submit button. Otherwise, stay here on the current field."
Here is my code:
function prepareForm() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
if (i !== 0){
inputs[i].disabled = "disabled";
}
// Make sure the tooltip tag is present...
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// When the user has entered information and clicked the tooltip, continue onto the next field.
inputs[i].parentNode.getElementsByTagName("span")[0].onclick = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
window.onload = prepareForm;
I've tried entering other logic in the onclick function, but because it gets executed at any time, I don't have access to the inputs array. Any help on how I can accomplish this would be really appreciated. Thanks!
As you said that you are comfortable with jQuery,I created this fiddle for you.As i dont know how are you showing the tool-tip,let me know if mine is not the one you are using.This example can help you start and add your own requirements.
I would not recommend this. You are changing the default behavior of forms... with little or no benefit for the end user.
In addition you are forcing the users to do additional work between fields clicking on non-form field elements.
This fails basic usability and will only confuse users. On a side note, if you haven't read "Don't Make Me Think" by Steve Krug please check it out at your earliest convenience - it is chock full of eye opening details about why "inventing" new UI concepts is often a bad idea.
Update: So I think its only fair that I provide a different recommendation based on the information given about this form being very much a hand-holding exercise.
Thus based on the need to control input field by field, I think the only way to do so in a usable way would be to provide this as a wizard, one field per page. There are some added benefits to this in that if a decision is made in an early step that negates the need for a future step it can be omitted completely.
As a result I envision a form where there is a Previous/Next button at the bottom of each step (where applicable... e.g. step 1 would have no previous). The Next button would start disabled and only enable itself when the user has put input into the field on that page. When each step is shown, the focus should automatically be put into the field to enable quicker entry.
If possible, a progress bar or % complete indicator can be added to give the user a better understanding of how many steps remain.
Pros/Cons to this approach.
Pros:
The user does not need to click anywhere to enable a valid transition to the next field
No fields are disabled causing user confusion (except the Next button which is expected)
The user can focus on the one field that matters at that moment (e.g. phone number) and there is plenty of room for instructions/help
If step 1 is asking for say "Gender" and the user selects "Male" then step 6 that asks if the user has ever been pregnant can be skipped/auto-answered
If the user wants to go back they can
The user can't "accidentally" get to the next field without filling out the previous field
The user will be familiar with this style/behavior of wizard, this is fairly typical of many wizards/installers
Cons:
User can not see all questions at once
User can not enter field values out of order
User can not simply tab from field to field thus the overall form will be slower for advanced users vs. a single form
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.