Categories
© 2013 All rights reserved.
4

Dynamické přidávání elementů formuláře

Občas se může hodit vytvořit dynamický formulář, jehož elementy jsou doplňovány až po vyvolání nějaké události uživatelem.

Článek se bude zabývat pouze vytvořením INPUTů a SELECTů z formuláře, ale obecně platí pro jakýkoli element.

Občas může nastat situace, kdy je potřeba vypsat formulář, který se bude dynamicky měnit v závislosti na uživatelově rozhodnutí.

Přesně k takovému formuláři nám může pomoci javascript, pomocí něhož jednoduše vytvoříme nový element a umístíme na příslušné místo:

Klikni:
+ / -    
+ 3 / - 3 /

Uvedený příklad si postupně rozebereme a vysvětlíme.

Základem celého příkladu jsou dvě funkce:

  • funkce pro přidávání řádku formuláře
  • funkce pro vymazání řádku formuláře

Obě funkce jsou volány po kliknutí na příslušný odkaz a je jim předáno jako parametr ID elementu, do kterého budou přidávat nebo mazat.

Nejprve trochu teorie:

createElement

CreateElement slouží, jak název napovídá, pro vytvoření elementu. Můžeme jím velice jednoduše vytvořit například TAG P, BR, nebo jakýkoli jiný jiné.

V našem příkladu potřebujeme vytvořit tagy SELECT, s ním související OPTION, a INPUT.

Funkce se volá velice jednoduše:

Takto jednoduše vytvoříme elementy, se kterými můžeme dále pracovat.

SetAttribute

SetAttribute slouží pro přidávání atributů k vytvořeným elementům nebo tagům.
Tato funkce má dva parametry, první je jméno atributu a druhý je jeho hodnota. Můžeme tak snadno přidat k našemu inputu hodnotu name nebo value. Popřípadě tuto funkci můžeme zavolat vícekrát a přidat atributů víc:

createTextNode

CreateTextNode slouží pro vytvoření textového popisku. Prostě textu.
S textem můžeme potom dále pracovat a umístit jej například jako hodnotu do jiného elementu:

appendChild

Funkce pro připojení potomka. U jejího použití je důležité si dávat pozor na správné připojování. Připojovat potomky můžeme pouze do párových tagů, takže například do INPUTU žádného potomka připojit nemůžeme. Na rozdíl od toho do SELECTu ano:

removeChild

Vymazání elementu. Použití je obdobné jako u appendChild.

Formulář

Nyní vám popíši jak funguje můj příklad, který jsem uvedl výše.

Existují zde dvě funkce. Funkce plus() a funkce minus(). Funkce plus() slouží pro přidání řádku do formuláře a funkce minus() pro jeho vymazání.

Dále zde existuje globální proměnná pojmenovaná num_of_lines, do které si dynamicky ukládám počet vytvořených řádků ve formuláři, abych si podle ní mohl snadno vytvářet unikátní ID elementů pro mazání.

U obou funkcí je vstupní parametr název elementu, ID elemntu, do kterého se bude přidávat, nebo ze kterého se bude mazat.

Funkce plus(element){}

Na začátku funkce si vytvořím proměnnou, ve které si uložím objekt elementu, předaný jako parametr, abych s ním mohl později pracovat. Přidávat do něj elementy.

Nyní můžu začít vytvářet nový řádek formuláře. Jako první si vytvořím input a přidám do něj atribut name:

Další element, který budu potřebovat, je SELECT a několik OPTIONů. Do jednotlivých OPTIONů si přidám textové popisky a value hodnoty. Navíc budu potřebovat name hodnotu u SELECTU:

Nyní by jsem mohl tyto dva elementy již přidat pomocí appendChild do elementu předaného jako parametr, ale ještě si oba atributy obalím elementem span, který bude mít jedinečné ID a dle něhož se potom bude mazat. Navíc si můžu vytvořit ještě popisek k řádku formuláře a oddělit celý řádek tagem BR. Takže si všechny tyto elementy vytvořím:

Nyní stačí pouze ve správném pořadí volat appendChild a všechny elementy do sebe zanořit:

Nakonec upravím proměnnou num_of_lines přičtením 1.

Funkce function minus(element){}

Tato funkce je oproti přidávání mnohem jednodušší. Stačí si pouze předat element a z tohoto elementu vymazat příslušný span, jak jsme si jej při přidávání vytvořili:

Celý kód si můžete prohlídnout zde:

Comments (4)

Děkuji, to je přesně ono:-)

Chtěl bych moc poděkovat za tento script. V JavaScriptu prakticky nedělám, jsem hlavně přes PHP a CSS – to jsou moje domény a přišlo mi hloupé, abych kvůli každému řádku musel refreshovat stránku, aby tam pen řádek byl od serveru poslán. Přeci jenom bych se rád zeptal, jak mám syntakticky napsat ten odkaz, aby u člověka který nemá zapnutý javascript fungoval jako normální odkaz, ale u člověka, který ho zapnutý má, se provedl jenom ten script? Chtěl bych si to takhle pojistit – kdyby někdo neměl zapnutý JavaScript, tak bych mu nový řádek poslal přes PHP…

Užitečná funkce, ale specifikace XForms(http://www.w3.org/MarkUp/For ms/2003/xforms-for-html-authors.htm l)
to řeší elegantněji. Škoda, že má prozatím nulovou porporu prohlížečů.

Hezky popsane, nicmene mam problem s tim ze IE6 mi hlasi problem u
x.appendChild(p)

"null" is null or not an object
PS:primo u tebe na strankach radka 153, znak 1.
Sice vse funguje tak jak ma, ale .. :)
netusis co je spatne ?

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).