Develop Reference

Selection from dropdownlist javascript event

I have this html part code :
<p><label>Taxe </label>
<select id="id_taxe" name="id_taxe" style="width: 100px;" onchange="taxselection(this);"></select>
<input id="taxe" name="taxe" class="fiche" width="150px" readonly="readonly" />%
</p>
Javascript method :
function taxselection(cat)
{
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
I'd like to set the value of taxe input to the selected value from the dropdownlist.It works fine only where the dropdownlist contains more than one element.
I try onselect instead of onchange but I get the same problem.
So How can I fix this issue when the list contains only one element?

This works:
$('#id_taxe').change(function(){
var thisVal = $(this).val();
var curVal = $('#taxe').val();
if(thisVal != curVal)
$('#taxe').val(thisVal);
$('#select option:selected').removeAttr('selected');
$(this).attr('selected','selected');
});
Use the change method which is very efficient for select boxes. Simply check the item selected isn't currently selected then if not, set the value of the input to the selected value. Lastly you want to remove any option's attr's that are "selected=selected" and set the current one to selected.
Just include this inside a $(document).ready() wrapper at the end of your HTML and the change event will be anchored to the select field.
Hope this helps.
http://jsbin.com/populo

Either always give an empty option, or in your code that outputs the select, check the amount of options, and set the input value straight away if there's only 1 option.
A select with just 1 option has no events, since the option will be selected by default, so there's no changes, and no events.

As DrunkWolf mentioned add an empty option always or you can try onblur or onclick event instead, depending on what you are actually trying to do.

Ok, just to stay close to your code, do it like this: http://jsfiddle.net/z2uao1un/1/
function taxselection(cat) {
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
taxselection(document.getElementById('id_taxe'));
This will call the function onload and get value of the element. You can additionally add an onchange eventhandler to the element. I highly recommend not doing that in the HTML! Good luck.

jQuery datepicker does not update value properly

On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});

Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo

If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.

jQuery 'change' method (for HTML attribute modify) working only once

I have this pair of functions affecting two inputs, and one select. These are exclusive so when inputs are filled, select must be modified to have option 3 selected, and when any option except 3 is selected, both inputs must be empty:
$('#ar_filter').on('change', '#ar_fromDate, #ar_toDate', function() {
if ($('#ar_fromDate, #ar_toDate').val!=""){
$('.lastDays').attr('readonly','readonly').find('option[value=3]').attr('selected', true);
}
});
$('#ar_filter').on('change', '#lastDays', 'select', function() {
if ($('.lastDays').val()!=3){
$('#ar_fromDate, #ar_toDate').val("");
}
});
This works, but only the first time. When I write some value on the inputs, it resets correctly select to value 3, but when I change manually selected options, after it resets and leaves inputs empty, it does not reset anymore the select, even when writing on any of those inputs.
JSFIDDLE EXAMPLE (try making 2 select resets by filling the inputs: it will only make the first one)

Based on your JSFiddle, I believe your second implementation of .on() is incorrect. The third optional argument can be passed as data to the handler function as denoted in the reference documentation.
Try changing:
$('#ar_filter').on('change', '#lastDays', 'select', function() {
to this:
$('#ar_filter').on('change', '#lastDays', function() {
Based on your comment above, I believe your selector is wrong. #lastDays is the id of the <select> element, which is where you want the change event bound. The extra select is not needed.
Updated Fiddle
Note:
The updated fiddle includes the .val() fix described by #tymeJV in his answer.
EDIT:
In addition to the .on() selector fix described above, you'll need to break out the two selectors in your .val() statement. This is because only the first input will be validated each time the change event occurs. This comes directly from the jQuery documentation for .val():
Get the current value of the first element in the set of matched elements.
The second value will not be fetched or validated.
Change this:
$('#ar_fromDate, #ar_toDate').val() != ""
to this:
$('#ar_fromDate').val() != "" || $('#ar_toDate').val() != ""
This should fix the problem. I've included an updated fiddle below. I've left the original fiddle in tact to show the progression of steps in solving this problem for the benefit of future visitors.
Complete Fiddle

jquery ui datepicker doesn't update values

Using the jquery datepicker ui, the value attributes of the associated html fields don't update immediately.
Example: http://jsfiddle.net/4tXP4/
From the horses mouth:
http://jqueryui.com/demos/datepicker/alt-field.html
If you inspect the elements you will see that neither value attributes update.
What' missing with these?

if you don't want another input field then use onSelect but the .val function does not update the value attribute, so you need to be a bit more raw
$("#datepicker_start").datepicker({
onSelect: function(dateText, datePicker) {
$(this).attr('value', dateText);
}
});

working demo http://jsfiddle.net/UBMXq/ or http://jsfiddle.net/3BLwK/9/ or http://jsfiddle.net/wrCv7/
1 things:
missing # "altField":"#startDate"
(optional) i.e. DateFormat might need some attention - I reckon dont use value in your hidden input
Hope this helps! :)
code
$(document).ready(function() {
$("#startDate_picker").datepicker({
"altField":"#startDate",
"dateFormat":"d M y",
"altFormat":"Y-m-d",
"changeMonth":true,
"changeYear":true
});
});

set value to jquery autocomplete combobox

I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");

Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.

I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);

#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}

I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.

http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});