Podmíněná pole ve formuláři jednoduše pomocí Nette a jQuery

Velmi jednoduchý, rychlý a znovupoužitelný postup na vytváření formuláře s podmíněně zobrazenými poli. Ukážeme si na příkladu kontaktního formuláře.

Takže příkládek: mám kontaktní formulář, kam uživatel vyplní své jméno, email, předmět zprávy a text zprávy. Chci dostat ihned co nejpřesnější informace, tak místo libovolného předmětu (input text) nabídnu výběr z několika možností (select). Zabývám-li se vším kolem webů, tak nabídnu např. možnosti tvorba webových stránek | grafika | programování | SEO. Přesto ale nechci uživatele nikam tlačit, kdyby mě chtěl kontaktovat ohledně něčeho, co není ve výběru (aneb kontrolovaná svoboda pro každý web!). Proto k možnostem v dropdownu přidám ještě jiné a ideální by bylo, kdyby ve chvíli, kdy uživatel cvakne na jiné, vyjelo políčko, kam by uživatel mohl své téma specifikovat. Jak na to?

Formulář v Nette

Nejdřív vysmrkneme formulářík pomocí Nette:

function createComponentContactForm() {
  $form = new Form;

  $form->addText("name", "Vaše jméno:")
    ->addRule(Form_::FILLED, "Prosím vyplňte jméno.");

  $form->addText("email", "Váš email:")
    ->addRule(Form_::FILLED, "Prosím vyplňte Váš email.")
    ->setEmptyValue("@")
    ->addRule(Form_::EMAIL, "E-mail nevypadá jako platná adresa.");

  $form->addSelect("subject", "Mám zájem o:", array(
      "tvorbu webových stránek" => "tvorbu webových stránek",
      "grafiku" => "grafiku",
      "programování" => "programování",
      "SEO" => "SEO",
      "jiné" => "jiné",
		))
    ->addRule(Form_::FILLED, "Prosím vyberte předmět zájmu.")
    ->controlPrototype->class("subject");

  $form->addText("another", "Jiný předmět zájmu - upřesněte:")
    ->addConditionOn($form["subject"], Form_::EQUAL, "jiné")
       ->addRule(Form_::FILLED, "Prosím vyplňte jiný předmět zájmu.");
  $form["another"]->controlPrototype->class("another");

  $form->addTextArea("message", "Text zprávy:", 40, 3)
    ->addRule(Form_::FILLED, "Prosím vyberte text zprávy.");

  $form->addSubmit("send", "Odeslat");

  $form->onSuccess[] = callback($this, "contactFormSubmitted");
  return $form;
}

A metodu pro schroustání formuláře:

 function contactFormSubmitted($form) {
   try {
     $values = $form->values;

     // process data and send mail - put mail code here or whatever you want

     $this->flashMessage("Zpráva byla v pořádku odeslána.");
     $this->redirect("Homepage:");
   }
   catch (AuthenticationException $e) {
     $form->addError($e->getMessage());
   }
 }

Ukazovátko píchám na následující věci, které by neměly uniknout pozornosti:

• selectu subject je přidaná třída class="subject"
• poli another je přidaná podmínka pro vyhodnocování – pokud je v dropdownu vybrána hodnota jiné, toto pole musí být vyplněno. Tomuto poli je rovněž přiřazena třída class="another"

Fičurky s jQuery

Formulář máme hotový a bude fungovat. Ještě pro blaho uživatele přidáme fičurku, kterou skryjeme pole another, aby neotravovalo, když jej uživatel nebude potřebovat. A naopak aby vyskočilo, když po uživateli chceme, aby do něj něco nabušil. Do šablony pod vykreslený formulář tedy přidáme skriptík:

 $(".another").parent().parent().hide();

 $(".subject").change(function() {
        if ($(this).val() == "jiné" ) {
            $(".another").parent().parent().show("fast");
        } else {
            $(".another").parent().parent().hide("fast");
        }
 });

Řečeno slovy humanitními: skryj pole another. Pokud někdo bude hrabat do selectu subject a pokud bude hodnota jiné, pole another zase ukaž. V jQuery kódu je trochu přeparentováno, je to proto, že používám výchozí vykreslování formuláře, tedy celý form je vykreslován do tabulky a každý prvek je v řádku tabulky. .parent().parent() znamená, že chci skrýt celý řádek s tabulkou, nikoli jen samotné pole nebo samotné td. Pokud používáte vlastní vykreslování formulářů, bude kód vypadat trochu jinak, a jistě jsou i jiné možnosti, jak zaměřit řádek tabulky.

Tím máme hotovo. Tento princip je uplatnitelný na další formuláře, kde chceme skrýt některé inputy a podmíněně je zase ukázat – např. registrační / objednávkový formulář s nepovinnými poli pro IČ / DIČ a mnoho dalších formulářů. Je to jednoduché a je to uživatelsky přítulné.