Question

I have the following code:

jQuery('#hexVal').change(function() {
    var hexvarval = jQuery('#hexVal').val();
    jQuery('#thumbnail_hover_color').val(hexvarval);
});

Basically, I want to change value of #thumbnail_hover_color INPUT every time #hexVal INPUT is being changed. When I do it manually it works. When other jQuery script puts text to #hexVal then it doesn’t update #thumbnail_hover_color.

Question: How do I trigger “change value” for one INPUT field each time the value is changed (anyhow) in other INPUT field? I want them to have ALWAYS the same value.

Answer 1

If you’re programmatically setting/changing the value of an input, you’ll also have to programmatically trigger the change event (or call the same code as the change event handler). So, I guess you have two options:

jQuery('#hexVal').change(function() {
    var hexvarval = jQuery('#hexVal').val();
    jQuery('#thumbnail_hover_color').val(hexvarval);
});

jQuery('#hexVal').val('some value'); // changing the value
jQuery('#hexVal').trigger('change'); // triggering the change event handler

or

function changeHexVal() {
    var hexvarval = jQuery('#hexVal').val();
    jQuery('#thumbnail_hover_color').val(hexvarval);
}

jQuery('#hexVal').change(changeHexVal);

jQuery('#hexVal').val('some value'); // changing the value
changeHexVal(); // calling the 'change' event handler function