I'm looking to make a chosen dropdown menu read only, and I need to do this dynamically using a jQuery selector. If I set it to disabled using:
$("#dropdownDepartment").attr("disabled","disabled").trigger('chosen:updated');
the value isn't POSTed but I need it to be.
I have tried
$("#dropdownDepartment").attr('readonly',true).trigger('chosen:updated');
but this doesn't work.
I'm using Chosen v1.4.2 and jQuery v2.1.4.
Help appreciated! Thank you.
The best solution for me was such an ugly trick $("#dropdownDepartment").prop('disabled',true).trigger('chosen:updated').prop('disabled',false).
So chosen is disabled but value from select is POSTed.
There are a few options you could do.
Disable the drop down and store the value in a hidden field and send that in a POST.
Disable all the other selections so only the one selected is enabled
$('#dropdownDepartment option:not(:selected)').attr('disabled', true);
Disable the drop down and before you do a post enable it
When you want to disable it turn it into a read only textbox
try this:-
var select = $('select');
var oldVal=$('select').val();
select.chosen().on('change',function(e){
select.val(oldVal);
select.trigger("chosen:updated");
});
Demo
I have a workaround at the same. So hope it will help someone in the future (I guess you already did the solution).
First print the selected option value of the chosen select into a hidden input like the following. For $_POST value get the value from this hidden input $_POST['myselect']:
<input type="hidden" name="myselect" value="selected_option_value_goes_here" />
Then disable the chosen select. But it is safe to set the hidden input value to the current one before disable it:
$('input[name=myselect]').val($(".chosen-select").val());
$('.chosen-select').attr("disabled", true).trigger("chosen:updated");
N.B. If you don't want to disable it then just no need to update the value of the hidden input on change event of the chosen select.
A working demo can be found by clicking here.
I may be late to the party, but I came across the same issue as OP. The workaround I have found to post back the values even if they are disabled is to re-enable them when the form is submitted.
$("form").bind("submit", function () {
$("#TheList *").prop("disabled", false).trigger("chosen:updated");
});
Notice the [space][star] after TheList, it is to recursively re-enable each child in the list.
we can achieve the excepted behaviour by removing the pointer event on chosen-container div.
with this even if we dont enable the input its value will be posted with form submit
//to disable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': 'none','opacity':0.5});
//to enable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': '','opacity':1});
try this
$("#dropdownDepartment").attr('disabled', 'disabled');
$("#dropdownDepartment").data('chosen').search_field_disabled();
$("#dropdownDepartment").removeAttr('disabled');
$("#dropdownDepartment").trigger('chosen:updated');
Related
I am trying to pick a default value from dropdown and disable it to user not change it with bellow code,
function brandPickerHn() {
$("#Search__32Page__32Layout__46dropdownlist5 option[value='Value2']").attr("selected", "selected");
$("#Search__32Page__32Layout__46dropdownlist5").attr("disabled", true);
}
Issue here is that, dropdown is mandatory and I can not move forward because even tough I used,
.attr("selected", "selected")
.prop("selected", true)
.click()
.change()
I can see the selected option in dropdown but like I didn't set it so still asking me to go and select any value from dropdown. If I not use code for disabling Dropdown there is no problem.
Can you please assist, where I am making mistake ? Please not tell me to see older posts as I already dig whole site but nothing working found, thats why asking it.
Thank you in advance.
You need to set the value of the select element directly, as this is where the value is stored:
function brandPickerHn() {
$("#Search__32Page__32Layout__46dropdownlist5").val('Value2');
$("#Search__32Page__32Layout__46dropdownlist5").attr("disabled", true);
}
I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.
Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.
I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.
This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP
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 have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?
You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);
You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.
Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");