Если выбран radiobutton "Другое" - появление нового текстового поля
Здравствуйте, надеюсь на Вашу помощь, ибо сильно поджимают сроки.
Вопрос завязан на незнании возможностей javascript. Уверен, задача тривиальная. Пытаюсь использовать готовые решения. У меня есть: <?php echo $form->radioButtonList($model,'company_type_of_ownership',array( "Private company"=>"Private company", "Other"=>"Other (please, specify)"),array('separator' => "",'onchange'=>'return ownership(this.value)')); ?> И: <div id="check_1" style="display:none"> <div class="row"> <?php echo $form->labelEx($model,'company_type_of_ownership_other'); ?> <?php echo $form->textField($model,'company_type_of_ownership_other',array('size'=>50,'maxlength'=>50)); ?> <div class="app_tip"></div> <?php echo $form->error($model,'company_type_of_ownership_other'); ?> </div> </div> И наконец: function ownership(obj){ if(obj=="Other"){ document.getElementById('check_1').style.display="block"; return false; }else{ document.getElementById('check_1').style.display="none"; return false; } } function legalForm(obj){ if(obj=="Other"){ document.getElementById('check_2').style.display="block"; return false; }else{ document.getElementById('check_2').style.display="none"; return false; } } function learnFrom(obj){ if(obj=="Other"){ document.getElementById('check_4').style.display="block"; return false; }else{ document.getElementById('check_4').style.display="none"; return false; } } (Несколько одинаковых скриптов, потому что имеется несколько таких полей для разных вопросов). Все работает отлично, при выборе "Other", появляется скрытый hidden див и пользователь может ввести свое значение. Проблема возникает тогда, когда пользователь выбирает "Other", но забывает указать свой вариант при отправке формы. Срабатывают мои правила валидации и он возвращается на ту же страницу. НО. :agree: Радио кнопка "Other" все так же выбрана, однако скрытое поле прячется, я так понимаю из-за ONCHANGE. Для того чтобы оно появилось и он мог ввести значение, необходимо выбрать какой-нибудь другой вариант (В данном случае 'Private company') и затем снова выбрать 'Other". Тогда поле, разумеется, вновь появится. Но такой подход не очевиден и мало кто догадается совершить такие манипуляции. Как исправить? Наверное, должно быть что-то вроде: 'onchange'||'ifchosen' (только на языке js, разумеется). Буду рад услышать Ваши предложения, спасибо! |
Я так понимаю у вас форма отправляется в любом случае, на сервере проверяются данные и если забыли указать, то возвращается та же страница? Если так, то при загрузке странице проверяйте какой радиобаттон выбран и показывайте то что надо. Или уточните проблему. И приводите уже сгенерированный HTML, а не эту PHP солянку с кучей непонятных переменных.
|
Цитата:
Совершенно верно, на сервере у меня: if ($this->company_type_of_ownership=='Other' && !$this->company_type_of_ownership_other) { $this->addError('typeofwnership', 'Please, specify the type of ownership'); } и если забыли указать свое значение, то возвращается эта же страница с ошибкой и просьбой это значение ввести. Проверить радиобаттон (при чем так, чтобы и предыдущий скрипт срабатывал) - это именно то что мне нужно, но не нашел готовых примеров в сети (а у самого написать не получается, синтаксис js/jquery знаю плохо). Если есть возможность, прошу помочь с готовым решением. Еще раз спасибо P.S. Если Вам это поможет: <div class="row"> <label for="Application_company_type_of_ownership" class="required">2.1 Company type of ownership <span class="required">*</span></label> <div class="radiogroup"> <input id="ytApplication_company_type_of_ownership" type="hidden" value="" name="Application[company_type_of_ownership]" /><span id="Application_company_type_of_ownership"><input onchange="return ownership(this.value)" id="Application_company_type_of_ownership_0" value="Private company" checked="checked" type="radio" name="Application[company_type_of_ownership]" /> <label for="Application_company_type_of_ownership_0">Private company</label><input onchange="return ownership(this.value)" id="Application_company_type_of_ownership_1" value="Other" type="radio" name="Application[company_type_of_ownership]" /> <label for="Application_company_type_of_ownership_1">Other (please, specify)</label></span> </div> <div class="app_tip">(Please, specify your company type of ownership)</div> <div class="errorMessage" id="Application_company_type_of_ownership_em_" style="display:none"></div> </div> <div id="check_1" style="display:none"> <div class="row"> <label for="Application_company_type_of_ownership_other">Specify the company type of ownership (if "Other" was chosen in 2.1)</label> <input size="50" maxlength="50" name="Application[company_type_of_ownership_other]" id="Application_company_type_of_ownership_other" type="text" value="my type of ownership" /> <div class="app_tip"></div> <div class="errorMessage" id="Application_company_type_of_ownership_other_em_" style="display:none"></div> </div> </div> |
Вставьте на страницу после формы такой блок скрипта:
<script type="text/javascript"> ownership(document.getElementById('Application_company_type_of_ownership_1').value); </script> Но это очень костыльное решение. По хорошему там надо это дело переписывать. И вообще первичную валидацию на стороне клиента делать чтобы зря данные туда сюда не гонять. |
СПАСИБО! Решение работает, за исключением одного - текстовое поле не скрыто по умолчанию. Оно прячется только если мы выбираем (в данном случае) "Private company" и в последующем ведет себя корректно (прячется/появляется при кликах на соответствующие кнопки). Есть ли возможность сделать что бы оно было спрятано при первой загрузке формы?
|
Цитата:
<script type="text/javascript"> (function() { var radio = document.getElementById('Application_company_type_of_ownership_1'); if (radio.checked) ownership(radio.value); })(); </script> |
:dance:
Не знаю как и благодарить :victory: В виду сроков думал уже вообще отказаться от данной функции. А если таких радио будет несколько, и вариантов выбора 3-4 для каждого - тоже будет работать? :thanks: P.S Сейчас проверю) |
Цитата:
|
Добавил для другого радио:
(function() { var radio2 = document.getElementById('Application_company_legal_form_3'); if (radio2.checked) legalForm(radio2.value); })(); И для него тоже заработало, СУПЕР! Ситуация такова, что с js никогда не работал, а в данном конкретном проекте приходится и фронтэндом заниматься. Сейчас главное в сроки уложиться, а по ходу уже буду стараться привести все это в человеческий вид. Или попросить кого навести порядок в скриптах, не за бесплатно, конечно. Кстати, Вы бы взялись? |
Часовой пояс GMT +3, время: 02:30. |