How to add multiple toggle condition

zizka
Member | 11
+
0
-

Hello, is there a way how to apply toggles from multiple inputs? For example this:

		$form->addRadioList("count", "Layers:", [1 => "1x", 2 => "2x", 0 => "None"])
			->addCondition($form::Equal, 0)
				->toggle(".layers", false);
		$form->addRadioList("color", "Color:", ["green" => "Green", "yellow" => "Yellow", "other" => "Other"])
			->setOption("class", "layers")
			->addCondition($form::Equal, "other")
				->toggle(".colorOther");
		$form->addText("colorOther", "Color:")
			->setOption("class", "layers colorOther");

The idea is that when I choose 1 and 2 as “count”, the “color” is shown. When I choose “other” color, the “colorOther” is shown. However when I keep “other” color selected and then choose “None” as count, the “colorOther” input is not hidden. Is there any way to achieve this?

Rick Strafy
Nette Blogger | 76
+
0
-

Hi maybe you can try to use form groups, something like:

$form->addGroup();

$form->addRadioList("count", "Layers:", [1 => "1x", 2 => "2x", 0 => "None"])
	->addCondition($form::Equal, 0)
	->toggle("colors", false); // changed from .layers to colors, shows/hides whole html section

$form->addGroup()->setOption('container', Html::el('div')->setAttribute('id', 'colors'));

$form->addRadioList("color", "Color:", ["green" => "Green", "yellow" => "Yellow", "other" => "Other"])
	->setOption("class", "layers")
	->addCondition($form::Equal, "other")
	->toggle(".colorOther");

$form->addText("colorOther", "Color:")
	->setOption("class", "layers colorOther");

$form->addGroup();
Infanticide0
Member | 89
+
0
-

If the problem is only in hiding form controls, you have to use ID HTML attributes instead of class names.

https://doc.nette.org/…s/validation#…
Any selector can be passed as an argument to the toggle() method. For historical reasons, an alphanumeric string with no other special characters is treated as an element ID, the same as if it were preceded by the # character.

zizka
Member | 11
+
0
-

Rick Strafy wrote:

Hi maybe you can try to use form groups, something like:

$form->addGroup();

$form->addRadioList("count", "Layers:", [1 => "1x", 2 => "2x", 0 => "None"])
	->addCondition($form::Equal, 0)
	->toggle("colors", false); // changed from .layers to colors, shows/hides whole html section

$form->addGroup()->setOption('container', Html::el('div')->setAttribute('id', 'colors'));

$form->addRadioList("color", "Color:", ["green" => "Green", "yellow" => "Yellow", "other" => "Other"])
	->setOption("class", "layers")
	->addCondition($form::Equal, "other")
	->toggle(".colorOther");

$form->addText("colorOther", "Color:")
	->setOption("class", "layers colorOther");

$form->addGroup();

Thanks, that looks like it might work, I will try that, but it just means I'm already prescribing in the form definition how the result will be rendered. Isn't there some other option? I'd find it useful if there was some reverse approach – rather than using some form input value to determine what other elements it will show/hide, I could instead specify for a given element under what conditions it will be shown or hidden. Isn't there some way to achieve this?