How to set it to default color when Reset button is clicked on?

When the page is loaded, I am setting the default color to #444444. This is working fine.

Similarly when the RESET button was clicked, I need to set it to defalt color #444444:

This is my code:

$(document).ready(function() {
$('#color').val("#444444");
    $('#colorPickerForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            color: {
                validators: {
                    hexColor: {
                        message: 'The color code is not valid'
                    }
                }
            }
        }
    });

    $('#colorPicker')
        .colorpicker()
        .on('showPicker changeColor', function(e) {
            $('#colorPickerForm').bootstrapValidator('revalidateField', 'color');
        });

        // When reset is clicked 
        $("#resetcolor").click(function(e){
        $('#color').val("#444444");
    });
});

Full JSFiddle: http://jsfiddle.net/vpu25k1g/44/

Answers 1

  • If you check the documentation for the colorpicker library you'll see this option:

    .colorpicker('setValue', value)
    Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.

    As such, you can use that method to set the color when the rest button is clicked:

    $("#resetcolor").click(function(e) {
      $('#color').val("#444444");
      $('#colorPicker').colorpicker('setValue', '#444444');
    });
    

    Updated Fiddle


Related Articles