Skip to content
Advertisement

Yii2 KartikV color input how to get selected color value from different input fields

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 enter image description here

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();
        });
    })
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement