Dynamické přidávání polí do formuláře jquery. Vytváření a odstraňování polí ve formuláři (jQuery). Odebrání konkrétního pole formuláře
Dobrý den, milí čtenáři. V některých situacích je nutné přidat několik stejných údajů prostřednictvím formuláře na webu, například vyplnění tabulky v databázi se jmény zaměstnanců společnosti, o to nejde. Souhlasíte s tím, že přidat jedno pole a pokaždé odeslat data na server je poměrně nudný úkol. Proto v tuto lekci naučíme se násobit pole formuláře a dělat jich tolik, kolik potřebujeme, a jQuery nám s tím pomůže. Podívejte se na příklad a hned pochopíte, co tím myslím.
Protože to uděláme kdy nápověda jQuery, pak musíte tuto knihovnu zahrnout.
Nyní vytvoříme samotný formulář s tlačítkem pro přidání nového pole a tlačítkem pro odeslání dat:
| název |
Jak jste si všimli, pro tlačítko Přidat pole jsme napsali parametr onclick="return add_new_image();" To znamená, že když na něj klikneme, měli bychom provést funkci, která se přidá další pole. Tato funkce v JavaScriptu to bude vypadat takto:
var total = 0 ;
funkce add_new_image() (
celkem++;
$
("
.attr("id","tr_image_" +celkem)
.css ((lineHeight:"20px" ))
.připojit(
$("
.attr("id","td_title_" +celkem)
.připojit(
$("" )
.css ((width:"200px" ))
.attr("id","input_title_" +celkem)
.attr("name","input_title_" +celkem)
)
)
.připojit(
$("
.css ((width:"60px" ))
.připojit(
$("
"
))
.appendTo("#table_container");
}
$(document).ready(function() (
add_new_image() ;
});
Podívejme se, co se tady děje. Protože při přidávání nového pole potřebujeme, aby se jejich jména lišila, abychom je mohli zpracovat na serveru. Za tímto účelem byla vytvořena celková proměnná, která se po kliknutí zvýší o 1 a přidá se k názvu vstupní pole. Poté doplníme do tabulky ve formuláři nový řádek
Poté přidáme první sloupec
V tomto sloupci přidáme vstupní pole a znovu použijeme atributy id a name a také styly
Další akce přidáváme druhý sloupec, ve kterém budeme mít tlačítko pro smazání pole. Tento kód by již mělo fungovat a přidat pole.
Nyní musíme vymyslet, jak všechna tato data zpracovat. Ve formuláři máme napsaný handler add.php a upravíme jej. Při přidávání nového pole, jak víme, máme nové proměnné input_title_1, input_title_2 atd. Zdálo by se, že je vše jednoduché, jednoduše spočítáme, kolik prvků je v poli $_POST a pomocí smyčky projdeme všechny hodnoty.
$n = počet($_POST);
for ($i =1 ; $i input_title_1
$key => input_title_2
$key => input_title_4
Nyní, když známe všechny hodnoty klíčů, můžeme je iterovat pomocí smyčky v původním poli, čímž nám proměnné „nechybějí“. V v tomto příkladu Pouze vypíše všechny hodnoty, ale můžete si s nimi dělat, co chcete. Chcete-li vytvořit dvě pole, musíte v JavaScriptu přidat následující kód ihned poté, co dokončíme přidání prvního sloupce:
Připojit (
$("
.attr("id","td_name_" +celkem)
.css ((paddingRight:"5px" ,width:"200px" ))
.připojit(
$("" )
.css ((width:"200px" ))
.attr("id","name_" +celkem)
.attr("name","name_" +celkem)
)
Nezapomeňte změnit parametry id a name, jinak budete mít několik polí se stejným názvem.
Formuláře jsou dnes jedním z nejdůležitějších nástrojů pro interakci uživatele s webovými aplikacemi. Formuláře vám umožňují organizovat efektivní řízení informace na webu, stav webu samotného, poskytovat služby klientům, předávat informace dalším uživatelům, poskytovat přístup k uzavřený úsek a mnohem, mnohem více... Proto existuje zcela přirozená touha dělat formy pohodlnějšími a přizpůsobenými specifické nuance práce.
Jednou z oblastí pro takové zlepšení by mohla být implementace schopnosti interaktivně, bez opětovného načítání stránky, řídit počet polí pro zadávání dat, a to jak zvyšování, tak snižování. To může být velmi výhodné, pokud potřebujete do databáze aplikace přidat ne jeden, ale několik záznamů najednou; nebo pokud není předem znám počet podobných údajů, z nichž každý vyžaduje samostatné vstupní pole (například několik telefonních čísel nebo kreditní karty uživatel). V tomto článku se podíváme na jeden z jednoduché implementace takovou příležitost skrz pomocí javascriptu jQuery knihovny.
Úplně dole si můžete stáhnout archiv s příklady, které jsou popsány v tomto článku.
Přidání nového pole do formuláře.Pomocí metody .append() vytvoříme nové pole formuláře:
$("selektor").append("string");který přidá „řetězec“ dovnitř prvku se zadaným „selektorem“, přičemž přidaný řetězec následuje existující obsah.
Pokud vezmeme v úvahu konkrétní příklad, pak by to mohlo být něco takového:
Pole #1 "/>Přidat nové poleSamotnou funkci addField() lze implementovat následovně:
< script type= "text/javascript" >function addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3) ) 1 ; $("div#add_field_area" ) .append ( "Pole č. "telnum"");
Nejprve jako obvykle zahrneme knihovnu jQuery a poté deklarujeme funkci addField(). Funkce nejprve vypočítá číslo, které je potřeba vložit do přidávaného prvku – pomocí tohoto čísla následně odstraníme nepotřebná pole. Potom addField() přidá do div#add_field_area kód bloku div#add№ s polem formuláře uvnitř, jehož kód je zcela podobný kódu „Pole č. 1“ uvedenému výše. Nyní, když klikneme na tlačítko „Přidat“, můžeme vidět, jak se nové pole okamžitě objeví.
Odstranění konkrétního pole formuláře.Chcete-li odstranit prvky stromu DOM, můžete použít metodu remove():
$("selektor").remove();který se aplikuje na prvek se zadaným „selektorem“. Budeme předpokládat, že standardně by mělo vždy zůstat jedno pole, všechna další lze smazat. Za tímto účelem ve funkci addField() do řádku parametrů metody .append() přidáme kód pro tlačítko smazání pole, po kliknutí se zavolá funkce deleteField (id) a číslo pole, které je třeba smazat, bude předáno funkci.
function addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3) ) 1 ; $("div#add_field_area" ) .append ("Číslo pole "telnum"");Samotná funkce deleteField() může být velmi jednoduchá:
funkce deleteField (id) ( $("div#add" id).remove () ; )To je vše. Nyní, když kliknete na tlačítko (červený křížek) naproti vybranému poli, zmizí a s ním i informace, které do něj byly zaznamenány.
Zpracování dat na serveru (php).Pokud formulář obsahuje více polí se stejným typem dat, přirozeně vyvstává otázka zpracování dat, například před odesláním do databáze. Ve výše uvedeném příkladu je tento problém vyřešen zadáním pole formuláře atribut názvu s parametrem val. To znamená, že po odeslání tohoto formuláře údaje Metoda POST, hodnoty těchto polí budou umístěny do pole $_POST['val'], jehož prvky lze iterovat foreach smyčka(...) (...), Například:
foreach ($_POST [ "val" ] jako $value ) ( // váš kód.... )Nebo v případě potřeby „slepte“ všechna data z těchto polí stejného typu do jednoho řádku pomocí funkce implode():
$str = implode ("|" , $_POST [ "val" ] ) ;Poté budou všechny hodnoty polí s name=”val” spojeny do řetězce s oddělovačem “svislá čára”.
Ale to je zpracování na straně serveru, které je mimochodem z bezpečnostních důvodů vhodnější. Mohou však nastat okolnosti, které vás donutí zpracovávat taková pole na straně klienta: například nemáte přístup ke skriptům serveru (používáte nějaký druh vzdáleného zpracování formuláře) nebo z nějakého důvodu nemůžete změnit činnost obslužný program formuláře na vašem serveru. V tomto případě můžete použít i prostředky jazyk javascript, a protože již pracujeme s knihovna jQuery- pak v něm budeme dále pracovat.
Zpracování dat na straně klienta.Řekněme, že naším úkolem je sloučit všechna data tohoto vícenásobného pole do řádku odděleného svislým pruhem „|“. Ve skutečnosti je to implementováno docela jednoduše.
Nejprve musíme mírně upravit samotný formulář, konkrétně přidat jedno skryté pole:
