Basically what I'm trying to do is self-explanatory in the title. Here's a snippet of code which enables the dropdown/select so it can be changed via client, but it will not disable after change:
function setLocVals(passedVal) {
$('#DropDownList1').removeAttr("disabled");
$('#DropDownList1').val(passedVal);
$('#DropDownList1'').attr("disabled", "disabled");
}
Is this even possible? Or am I looking at this completely the wrong way?
I could change to a textbox, but this is a dropdown containing US states. If there's a record for the user then the selection is restricted for the user, if no record exists, then they can select.
Just put a condition when you have to disable. See this fiddle
Use this approach.
First set the value in option.
Then retrieve the current value of the option and check if it is set to the one than you have passed then put the condition to disable else not
function setLocVals(passedVal) {
$('#DropDownList1').val(passedVal);
var value = $('#DropDownList1').val();
if(value == passedVal){
$('#DropDownList1').attr("disabled", "disabled");
}
}
Related
My question is, using javascript / jquery, "How do you change the value of a dropdown option at a specific index that is NOT the selected index?"
I have a dropdown list of values. User can select an option. I have a method which enables the user to change the value at that selected option. The value gets changed and all is well.
Here is my issue: If the user decides to cancel, or changes to a different value in the list without saving the changes to the database, I want to undo the value change.
I have the index of the changed option.
I have the old value of the changed option.
I have the new value of the changed option.
If the user has selected a different option, I don't want to change the index of the newly selected option. I just want to reset the value of the option the user changed.
I've tried a .each method:
var changedTitle = $('#ddTitle').text();
$("#ddTitle option").each(function() {
if($(this).text() == changedTitle) {
$(this).text(savedTitle);
}
});
I like the idea of looping through each one but I never see execution loop through a second time and the browser never comes back.
I've tried a .filter method:
var changedTitle = $('#ddTitle').text();
$("#ddTitle option").filter(function(index) { return $(this).text() === changedTitle; }).attr('selected', 'selected');
$("#ddTitle option").filter(function() {
return $(this).text() === changedTitle;
}).prop('selected', true); // changes the selected option
I got the above filter code to work but it sets the selected option.
$("#ddTitle option").filter(function() {
return $(this).text() === changedTitle;
}).prop('text', savedTitle); // execution never returns
I tried using the text property on the option but jquery gets very busy and execution never returns.
I've tried finding by the text value, which is silly because I know the index:
$("#ddTitle option[value='" + theText + "']").attr('selected', 'selected');
If these get an option it is the first option (0) or the browser hangs.
Is there a way to change the text value at a specified index programmatically in javascript or using jquery? Nothing I've tried works.
To change the value of the 5th option, do:
$('#yourselect').children('option:eq(4)').html('your text');
Description
I am using a jquery plugin chosen which pretty much does something like this:
This lets me add each option one by one or remove each option one by one. For every option selected, I create a new element with the selected option's value as the id.
Problem
The problem is when I remove an option from the list. For example:
$('#multiple-select').on('change', function(e){
alert($(e.target).val());
});
Will return the correct value if an option is added, however it returns null if we remove an option. I need to be able to get the value of the option being deselected so I can remove it in the other element.
Question
How can I get the deselected option's value to return the actual value instead of null? Or is there another way to bypass this problem?
All I need to be able to do is find the option being deselected and removing it from the other element (knowing that the element's id is built on the option's value).
Update
Remove code as requested:
$('body').on('change', benefs, function(e){
var $nbparts = $(participantNbParts),
$target = $(e.target),
$val = $target.val(),
$name = $target.text();
if($val == null){
//this is because we deleted something thus we need to remove it from $nbparts which is a pitty since we don't know what it was before it got deleted
}else{
//someone was added
$(create_row_expense_nb_parts_participant($name, $val)).appendTo($nbparts).show('slow');
$nbparts.parent().show('fast');
}
});
jQuery chosen provides selected and deselected using which you can identify selected and deselected values respectively, like:
$("#your_element_id").on('change', function (evt, params) {
var selected = params.selected;
var removed = params.deselected; //gives you the deselected value
//assuming your option ids are numbers
if( removed > 0 ) {
console.log( "Value removed is:" + removed );
}
});
From its documentation in the change event description you have
Chosen triggers the standard DOM event whenever a selection is made
(it also sends a selected or deselected parameter that tells you which
option was changed).
This suggests you should observe the arguments received by the event handler at run time to get a hint about (and most likely a reference to) the removed/deselected option.
Would like to know how to link a checkbox's checked state to a value on a textfield returned from an sql query. The textbox value is updated after a user selects a value from a select/menu on the form. The value of the select menu option is used as a filter in the query, which is working fine.
if ($('#textbox').val("TRUE")
{ $('#mycheckbox').prop('checked',true);}
else
{
$('#mycheckbox').prop('checked',false);
}
The problem is that the if statement works for the previous value the user selected. So its always one click behind even though the textbox value is current. Although the value of the textbox is current on the form, when I make an alert box displaying the textbox's value, it too is behind. So the if statement is ok, its just its using the textbox's previous value and not the current one. Any way to make this current?
First, you have syntax error in your code, assuming that is a typo.
What you are doing by$('#textbox').val("TRUE") is setting the value of textbox to TRUE.
So whenever your code block will execute you will end-up with checked check box, and textbox with TRUE value.
If your goal is to update the checkbox as per the value of text box. you can put the following one liner code instead of your four line, when you are actually setting/updating the value of text box.
$('#mycheckbox').prop('checked',$('#textbox').val() == "TRUE")
Update
As you mentioned you are setting the new value after a ajax call and didn't included your code sample, I'm guessing, your code is something like:
$.ajax({
url: "your/url"
}).done(function(data) {
$('#textbox').val(data)
});
If so, update your code to
$.ajax({
url: "your/url"
}).done(function(data) {
$('#textbox').val(data);
$('#mycheckbox').prop('checked',$('#textbox').val() == "TRUE");
});
The response is based on guess.
Your if statment is not testing the value of #textbox it is actually setting a value.
Try changing your if statement to read:
if ($('#textbox').val() == "TRUE")
Here's another SO post that might help.
I'm trying to have an input field be enabled or disabled depending on the choice of the drop down.
Code fiddled here: http://jsfiddle.net/mwoods98/cr7dW/
$('#getHoldStatus').change(function()
{
var selected_item = $(this).val()
if(selected_item == "On Hold until Candidate Available"){
$('#datepicker').val("").removeClass('hidden');
}
else
{
$('#datepicker').val(selected_item).addClass('hidden');
}
}
);
In this example you will see three date fields what will use jquery datepicker
The idea is that when the page first loads that the input fields of: Hold start date and Hold end Date will be either: Not displayed or disabled.
If "On Hold until Candidate Available" is selected then Both Hold start date and hold end date are activate/visible. If "on hold until position available" is selected then Only Hold start date is active/visible.
I found a script that works but when I try it on my page its not working.
TIA
I found a script that works but when I try it on my page its not
working.
If the script is working on jsFiddle and not on your site there could be following things to check.
If jQuery is added successfully.
You have put the code in document.ready function.
*Edit: * based on comment by OP
In change event you are comparing value using val() with the text which you should compare with value instead of text.
Change
if(selected_item == "On Hold until Candidate Available"){
To
if(selected_item == "3"){
I just had a look at the script and there are a couple of things you want to change.
1) Instead of display:none in css change to visibility:hidden
2) When javascript returns a selected_item it returns the value of the dropdown not the text so you want to check if(selected_item=="3") or whatever number you require.
This should sort out the issue.
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.