Change css dependent on value from database

Question

I've few radiobuttons in my form which I've changed css styling as below. formfield

<div class="form-inline boxradio">

                            <?php 
                                if((Yii::$app->user->can('s_newworkop') && $model->wp_status == 'Submitted') || (Yii::$app->user->can('s_newworkop') && Yii::$app->user->can('s_newworkem') && $model->wp_status == 'Assigned')){

                                    echo $form->field($model, 'wp_spost21')->radioList(
                                        ['Yes'=>'Yes','No'=>'No','NA'=>'NA'],
                                        [
                                        'item' => function($index, $label, $name, $checked, $value) {

                                                $return = '<label>';
                                                $return .= '<input type="radio" name="' . $name . '" value="' . $value . '" tabindex="3">';

                                                $return .= '<span class="'.$value.'">' . ucwords($label) . '</span>';
                                                $return .= '</label>';

                                                return $return;
                                            }
                                        ]
                                        )

                                    ->label(false);
                                }else{
                                    if($model->wp_spost21 == 'Yes'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'yes32.png');
                                    }
                                    elseif($model->wp_spost21 == 'No'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'no32.png');
                                    }
                                    elseif($model->wp_spost21 == 'NA'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'na32.png');
                                    }
                                }
                            ?>
                        </div>

CSS

.boxradio label input
{
  display:none;
}

.boxradio label span
{
  position:relative;
  display: inline-block;
  margin: 2px 2px;
  padding: 2px;
  width: 35px;
  background: #ffffff;
  border: 1px solid black;
  border-radius: 4px;
}

.boxradio label input:checked + span 
{
  border: 1px solid #008eff;
}

.boxradio label input:checked + span:before
{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: #008eff;
  z-index: -1;
  filter: blur(5px);
}

.boxradio label input:checked + span:after
{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: #008eff;
  z-index: -1;
  filter: blur(7px);
}

.boxradio label input:checked + span.Yes
{
  color: #00802b;
  border-color: #00802b;
  box-shadow: inset 0 0 2px #00802b;
}

.boxradio label input:checked + span.Yes:before,
.boxradio label input:checked + span.Yes:after
{
  background: #00802b;
}

.boxrdio label input[value="Yes"] + span {
  color: #00802b;
  border-color: #00802b;
  box-shadow: inset 0 0 2px #00802b;
}

.boxradio label input:checked + span.No
{
  color: #992600;
  border-color: #992600;
  box-shadow: inset 0 0 2px #992600;
}

.boxradio label input:checked + span.No:before,
.boxradio label input:checked + span.No:after
{
  background: #992600;
}

.boxradio label input:checked + span.NA
{
  color: #5F5858;
  border-color: #5F5858;
  box-shadow: inset 0 0 2px #5F5858;
}

.boxradio label input:checked + span.NA:before,
.boxradio label input:checked + span.NA:after
{
  background: #5F5858;
}

This works good when I'm submitting the form for the first time. The radiobutton css is changed when I click any. But in case of update, when the form opens, I can't understand which radiobutton I checked at the time of submitting. I need to change the css of the button as per the data from the database.

The current update form looks like -

I want to look it by default like

Please help.

Could you make a Fiddle of your working progress and explain a bit more about what you expect it to happen ? I didn't get if you need the radio-button to stay checked after submitting the form or you want the radio-button to change to another css style after submitting the form. — mattdaspy, May 12 '19 at 09:14
This code is working good when I'm filling up the form and submitting. If i want to update the form, and reopen the form, the radio buttons are not showing as checked. I want to see fhem checked when the form loads — Alias, May 12 '19 at 10:03

score 0 · Answer 1 · answered May 12 '19 at 10:10

Then it's not about the CSS, you could use HTML5 and JavaScript to store the values on session using sessionStorage.getItem() and sessionStorage.setItem(), so it'd store the values of the radioboxes like the last session of that same page, I have answered a question on handling data using this method, check and see if you can apply it on what you need :

Passing Data to Another Component OnClick

Note that after submitting a form, normally your data is sent and the form is cleared, so all elements go back to their original state.

score 0 · Answer 2 · answered May 14 '19 at 07:57

You can add checked attribute like this:

 'item' => function($index, $label, $name, $checked, $value) {
       if ($checked) {
          $checkedText = 'checked="checked"';
       } else {
              $checkedText = '';
       }
      $return = '<label>';
      $return .= '<input type="radio" name="' . $name . '" value="' . $value . '" tabindex="3" '.$checkedText.'>';
      $return .= '<span class="'.$value.'">' . ucwords($label) . '</span>';
      $return .= '</label>';

     return $return;
   }
]

Change css dependent on value from database

2 Answers2