Dependent form select with AJAX – Chyba: Please select a valid option

flamengo

Vytvořil jsem formulář, v kterém se druhý select box plnil dle vybrané hodnoty z prvního selectboxu. Vycházel jsem z článku Dependent form select with AJAX.

Narazil jsem na problém s nastavením setPrompt().

Pokud použiji ->setPrompt('Select'), v HTML se vytvoří <option value="">Select</option>.
Jenže já potřebuji mít value=0: <option value="0">Select</option>.

Pokusil jsem se to obejít tím, že nenastavím prompt, ale vložím to jako položku selectu.

public function handleFirstChange($value)
{
    if ($value) {
        $secondItems = [
        	0 => 'Select',
            1 => 'First option ' . $value . ' - second option 1',
            2 => 'First option ' . $value . ' - second option 2'
        ];
        $this['selectForm']['second']->setItems($secondItems);

    } else {
        $this['selectForm']['second']->setItems([0 => 'Select from first']);
    }

    $this->redrawControl('wrapper');
    $this->redrawControl('secondSnippet');
}

protected function createComponentSelectForm()
{
    $firstItems = [
        1 => 'First option 1',
        2 => 'First option 2'
    ];

    $form = new \Nette\Application\UI\Form;
    $form->addSelect('first', 'First select:', $firstItems)
        ->setPrompt('Select');

    $form->addSelect('second', 'Second select:')
         ->setItems([0 => 'Select from first']);

    $form->addSubmit('send', 'Submit');

    $form->onSuccess[] = [$this, 'processSelectForm'];

    return $form;
}

// do latte doplním jen zobrazení chyb
{snippetArea wrapper}
    {form selectForm}
        {label first /} {input first}
        {snippet secondSnippet}
            {label second /} {input second}
        {/snippet}
        {input send}
		<div class="alert alert-danger" n:if="$form->hasErrors()">
			<p n:foreach="$form->errors as $error">
				{$error|noescape}
			</p>
		</div>
    {/form}
{/snippetArea}

Výsledek je chyba Please select a valid option.

Netušíte někdo proč to?

Editoval flamengo (26. 9. 2016 17:35)

Barvoj

Předpokládám že je to tím, že při vytvoření formuláře nenastavíš možnosti do druhého selectboxu podle aktuální hodnoty prvního.

Vytvoříš totiž vždycky formulář s druhým selectboxem, kde je pouze možnost 0. Pokud tedy vybereš cokoliv jiného, tak formulář nebude validní.

Mělo by stačit změnit to cca takto:

protected function createComponentSelectForm($name)
{
    $firstItems = [
        1 => 'First option 1',
        2 => 'First option 2'
    ];

	// Je důležité předávat formuláři $this a $name jinak by nefungovalo níže použité $firstSelect->getValue()
    $form = new \Nette\Application\UI\Form($this, $name);
    $firstSelect = $form->addSelect('first', 'First select:', $firstItems)
        ->setPrompt('Select');

	$secondItems = [0 => 'Select from first'];

	if ($firstSelect->getValue()) {
		$secondItems = [
            0 => 'Select',
            1 => 'First option ' . $value . ' - second option 1',
            2 => 'First option ' . $value . ' - second option 2'
        ];
	}

    $form->addSelect('second', 'Second select:')
         ->setItems($secondItems);

    $form->addSubmit('send', 'Submit');

    $form->onSuccess[] = [$this, 'processSelectForm'];

    return $form;
}

Celkem se mi na toto téma líbí článek http://zlml.cz/…t-select-box

Editoval Barvoj (26. 9. 2016 17:50)

flamengo

@Barvoj Díky moc, už funguje. Článek jsem již četl, ale moudrý jsme z něj moc nebyl :)