I am using KartikV color input widget for Yii2 advanced and I have a lot of color input fields in my form. How can I get value of new selected color after every select of different color inputs. Main purpose of this is that I need to select color for some option and draw on canvas with this selected color. After that I must select another color from different input and continue drawing on canvas but now with the new selected color value. jQuery script for drawing is ready but need to assign selected color after every input change. Image of form attached
Example of one color select row:
<div class="row skin-condition-select-sections"> <div class="col-md-4"> <?= $form->field($skin_condition_model, 'head_skin_scars') ->widget(ColorInput::classname(), [ 'showDefaultPalette' => false, 'options' => ['placeholder' => ' ',], 'addon' => ['append' => [ 'content' => Html::button('Go', [ 'class' => 'btn btn-primary color-picker' ]), 'asButton' => true] ], 'pluginOptions' => [ 'showInput' => true, 'showInitial' => true, 'showPalette' => true, 'showPaletteOnly' => true, 'showSelectionPalette' => true, 'showAlpha' => false, 'allowEmpty' => true, 'preferredFormat' => 'name', 'palette' => [ [ "black", "grey", "maroon", "magenta", ], [ "red", "orange", "yellow", "indigo", ], [ "blue", "green", "cyan", ], ] ] ])->label(false) ?> </div> <div class="col-md-4 text-center "> <h5><?= Yii::t('app', 'Scars/Scratches') ?></h5> </div> <div class="col-md-4"> <?= $form->field($skin_condition_model, 'face_skin_scars') ->widget(ColorInput::classname(), [ 'showDefaultPalette' => false, 'options' => ['placeholder' => ' '], 'pluginOptions' => [ 'showInput' => true, 'showInitial' => true, 'showPalette' => true, 'showPaletteOnly' => true, 'showSelectionPalette' => true, 'showAlpha' => false, 'allowEmpty' => true, 'preferredFormat' => 'name', 'palette' => [ [ "black", "grey", "maroon", "magenta", ], [ "red", "orange", "yellow", "indigo", ], [ "blue", "green", "cyan", ], ] ] ])->label(false) ?> </div> </div>
Advertisement
Answer
Because of this form was generated in modal, I didn’t had those values in html. So I added JS that got those values after open modal
$('#skinModal').click(function (){ $( ".spectrum-input" ).change(function() { color = $(this).val(); }); })