Bootstrap colorpicker not updating value on change

Question

I am making a form using bootstrap, one of the inputs is a colorpicker element. When users pick a color, the value attribute remains the same. It seems that value attribute remains to whatever it was initially.

I am using: [email protected] and [email protected]

Here is my color input:

    <div class="row align-items-center">
      <label class="col col-form-label" for="priceColor">Price Color</label>
      <div class="col">
        <input type="color" class="form-control form-control-color" id="priceColor" value="#563d7c" title="Choose your color"> 
      </div>
    </div>

Here is my javacript:

$('#priceColor').on('change', function() {
  console.log($('#priceColor').attr('value'))
});

The code above does get triggered when the color is changed, however the value remains the same as stated above.

Just to be clear, I am not using bootstrap-colorpicker. I am only using Bootstrap's colorpicker.

I don't know where/if the value is stored elsewhere but it does not get stored on the html element.

Answer 1

You need to get the current color value, instead you are printing the initial fixed value that you have specified in the html.

$("#priceColor").on("change", function () {
      console.log($(this).val());
});

This will provide the current color code.