Using jQuery trying to change background-color of text box but not working in wordpress

2 Views

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.

Read More

How to solve this?

Post Views: 2

Related posts

Leave a Reply

1 comment

  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);
    });
});