Using jQuery trying to change background-color of

Question

Here is jQuery code which I am using .

<input class="jscolor" name="jscolor" value="F078A0" />
<input name="my_txtbox" type="text" id="my_txtbox_id" value="F078A0" />

<script type="text/javascript">
jQuery('.jscolor').on('change', function($) {
    var color = jQuery('.jscolor').val();
    jQuery('#my_txtbox_id').text(color);
    jQuery('#my_txtbox_id').attr('value',color);
    jQuery('#my_txtbox_id').css('background-color',color);
});
</script>

I put this in my plugin function file #my_txtbox_id get value of color but background-color CSS is not working.

How to solve this?

Answer 1

The color code needs a prepending # to be used with CSS.

Change

jQuery('#my_txtbox_id').css('background-color',color);

To

jQuery('#my_txtbox_id').css('background-color', '#' + color);

Edit: You can further optimize the code like so:

jQuery(document).ready(function ($) {
    $('.jscolor').on('change', function (e) {
        var color = $(this).val();
        $('#my_txtbox_id').val(color).css('background-color', '#' + color);
    });
});