Форум

Juslaines · #1 (**permalink**) 04.10.2022, 15:02

Есть форма, на форме есть checkbox по нажатию на него раскрываются дополнительные поля для заполнения. Как сделать так, чтобы после сохранения при просмотре или редактировании этой формы если хотя бы 1 поле в раскрывающейся области checkbox заполнено оно автоматом было раскрыто ?

рони · #2 (**permalink**) 04.10.2022, 17:20

Juslaines,
сделайте минимальный макет.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Juslaines · #3 (**permalink**) 06.10.2022, 08:21

<div class="row form-check">
    <label><input class="form-check-input checkbox" type="checkbox" id="checkbox2" value="checkbox-block-2"> Оплата</label>
</div>
<div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
	<div class="row">
		<div class="col"><?= $form->field($claim, 'clPayMain')->widget(MaskMoney::classname(), [
				'pluginOptions' => [
					'prefix' => '$ ',
					'allowNegative' => false,
					'allowZero' => true,
					'allowEmpty' => false,
				]
			])->label("основная сумма оплат ($)") ?>
		</div>
		<div class="col"><?= $form->field($claim, 'clPayPenalty')->widget(MaskMoney::classname(), [
				'pluginOptions' => [
					'prefix' => '$ ',
					'allowNegative' => false,
					'allowZero' => true,
					'allowEmpty' => false,
				]
			])->label("неустойка (штраф, пеня)($)") ?>
		</div>
		<div class="col"><?= $form->field($claim, 'clPayPercent')->widget(MaskMoney::classname(), [
				'pluginOptions' => [
					'prefix' => '$ ',
					'allowNegative' => false,
					'allowZero' => true,
					'allowEmpty' => false,
				]
			])->label("проценты($)") ?>
		</div>
		<div class="col"><?= $form->field($claim, 'clPayDamages')->widget(MaskMoney::classname(), [
				'pluginOptions' => [
					'prefix' => '$ ',
					'allowNegative' => false,
					'allowZero' => true,
					'allowEmpty' => false,
				]
			])->label("убытки($)") ?>
		</div>
	</div>
</div>

рони · #4 (**permalink**) 06.10.2022, 09:37

Juslaines,
не ясен момент, как и когда поля будут заполнены, что их заполняет, то и должно открывать блок.
возможный вариант, после загрузки страницы, но лучше это сделать на сервере сразу.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".form-check").forEach(div => {
                let nextDiv = div.nextElementSibling;
                let filled = Array.from(nextDiv.querySelectorAll("input"), ({
                        value
                    }) => value)
                    .filter(value => value).length;
                if (filled) {
                    nextDiv.style.display = "block";
                    div.querySelector("input").checked = true;
                }
            });
        })
    </script>
</head>
<body>
    <div class="row form-check">
        <label><input class="form-check-input checkbox" type="checkbox" id="checkbox2" value="checkbox-block-2"> Оплата</label>
    </div>
    <div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
        <div class="row">
            <div class="col"><input name="" value="12345">
            </div>
            <div class="col"><input name="">
            </div>
            <div class="col"><input name="">
            </div>
            <div class="col"><input name="">
            </div>
        </div>
    </div>
    <div class="row form-check">
        <label><input class="form-check-input checkbox" type="checkbox" id="test" value="test"> test</label>
    </div>
    <div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
        <div class="row">
            <div class="col"><input name="">
            </div>
            <div class="col"><input name="">
            </div>
            <div class="col"><input name="">
            </div>
            <div class="col"><input name="">
            </div>
        </div>
    </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript