Yii2 скрыть форму поля onchange radio - PullRequest
Новая
       12

Yii2 скрыть форму поля onchange radio

0 голосов
/ 15 марта 2019

У меня есть radioList с 2 значениями, 1 и 2. Я хотел бы скрыть textInput, если радио установлено на 2. Я пробовал: 

$script = <<< JS

$(document).ready(function () {
    if(document.getElementById('radio').val() == '2' ) {
        document.getElementById('textInput').style.display = 'none';
        document.getElementById('textInput').hide();
    } else {
        document.getElementById('textInput').show();
    }
});

JS;
$this->registerJs($script);

echo $form->field($model, 'radio')->radioList(['1' => '1', '2' => '2'], ['id' => 'radio']);
echo $form->field($model, 'textInput')->textInput(['id' => 'textInput']);

Есть идеи?

1 Ответ

1 голос
/ 15 марта 2019

Несколько проблем с вашим кодом

  • Вы нигде не загружаете / не регистрируете скрипт, используя $this->registerJs($script,\yii\web\View::POS_READY).
  • Не существует метода с именем .val(), но .value при использовании javascript document.getElementById().
  • Нет никакого метода .show() и .hide() в javascript
  • Тогда, даже если бы вы выполнили описанные выше шаги, это все равно не сработало бы, потому что вы не связываете какое-либо событие с радиовходами - ваш скрипт - это просто встроенный скрипт, который будет вызываться, когда страница загружен.
  • Идентификатор radio, который вы указываете в radioList, будет id контейнера, в котором находятся все входы списка радиостанций.
  • И вам необходимо скрыть весь контейнер ввода, а не только ввод, чтобы метка также была скрыта и отображалась вместе с вводом.

Поскольку вы использовали тег javascript, который я использую addEventListner, чтобы связать событие, см. Приведенный ниже код и добавьте его в верхней части окна. 

$script = <<< JS
document.querySelectorAll("#radio input[type='radio']").forEach(function(element){
    element.addEventListener('click',function(){
        if(this.value == '2' ) {
            document.querySelector('#textInput').parentElement.style.display = 'none';
        } else {
            document.querySelector('#textInput').parentElement.style.display = 'block';
        }
    });
});
JS;
$this->registerJs($script, \yii\web\View::POS_READY);
...