Autor | Zpráva | ||
---|---|---|---|
sir_lamoid Profil |
#1 · Zasláno: 10. 3. 2014, 16:33:07
Zdravím,
Potřeboval bych poradit mám mít takový formulář který se bude posílat na server do DB ![]() Po kliknutí na přidat cestujícího by se měl přidat další blok pro vyplnění údajů. Jak to udělat? |
||
Joker Profil |
#2 · Zasláno: 10. 3. 2014, 17:30:13
sir_lamoid:
Jednotlivé formulářové prvky budou dělané jako pole, tj. s hranatými závorkami name="jmeno[]" , name="cisloop[]" apod.
HTML příslušného bloku pak bude někde v JS uložené a po kliknutí se připojí k dokumentu. Naopak po kliknutí na odebrat se odebere prvek, ve kterém bylo kliknuto. |
||
sir_lamoid Profil |
#3 · Zasláno: 10. 3. 2014, 18:33:22
A to by bylo jak přesně zkouším takovýto kód ale ne a ne jít
<script type="text/javascript"> var i=1; function addPolozka(){ document.getElementsById("pridani"+i)='<input type="text" name="jmeno[]" placeholder="Jméno" /><span id="pridani'i'"></span>';i++; } </script> </head> <body> <form> <input type="text" name="jmeno" placeholder="Jméno" /> <input type="text" name="prijmeni" placeholder="Jméno" /> <input type="text" name="cislo" placeholder="Jméno" /> <span id="pridani1"></span> <input type="button" onclick="addPolozka();" /> |
||
Chamurappi Profil |
#4 · Zasláno: 10. 3. 2014, 19:12:32
Reaguji na sira_lamoida:
„ <span id="pridani'i'"> “
Řetězce se v JavaScriptu spojují plusem, tohle je syntaktická chyba. |
||
Joker Profil |
#5 · Zasláno: 10. 3. 2014, 19:12:40
sir_lamoid:
Takhle to opravdu fungovat nebude. Ještě tak kdyby na řádku 4 bylo: document.getElementsById("pridani"+i).innerHTML = …
A vložení hodnoty do řetězce se nedělá "text"i"text" , ale "text" + i + "text" .
Ani tak ale vložení toho <span>u nebude fungovat, protože se to jednak vloží do toho původního (resp. uvnitř <span> nemůže být další <span>, takže se ten předchozí ukončí a bude tam ukončovací značka navíc, ale kdyby to byl <div>, zanořovaly by se do sebe), navíc se vloží se stejným id jako ten už existující. |
||
sir_lamoid Profil |
#6 · Zasláno: 10. 3. 2014, 20:47:02
Tak nakonec asi řešení:
<script type="text/javascript"> var i=1; function addPolozka(){ document.getElementById("pridani"+i).outerHTML='<input type="text" name="jmeno[]" placeholder="Jméno" /><div id="pridani'+(i+1)+'"></div>'; i=i+1; } </script> </head> <body> <form> <input type="text" name="jmeno" placeholder="Jméno" /> <input type="text" name="prijmeni" placeholder="Jméno" /> <input type="text" name="cislo" placeholder="Jméno" /> <div id="pridani1"></div> <input type="button" onclick="addPolozka();" /> |
||
Chamurappi Profil |
#7 · Zasláno: 10. 3. 2014, 21:27:51
Reaguji na sira_lamoida:
S i++ žádný problém nebyl. Proč nepoužíváš doporučený innerHTML ? Vlastnost outerHTML má slabší podporu.
|
||
Joker Profil |
#8 · Zasláno: 10. 3. 2014, 22:53:46
sir_lamoid:
Tohle ovšem pokaždé odstraní ten předchozí <div> (tj. po prvním kliknutí přestane existovat <div> pridani1, po druhém kliknutí přestane existovat <div> pridani2, a tak dále). Já bych si ten kontejner nechával, jednak bez něj bude dost problém udělat i funkčnost „Odebrat“ (těžko se pozná, co vlastně odstranit), jednak se hodí i kvůli vzhledu. Pro blok formulářových polí bych ze vzhledových i sémantických důvodů doporučil <fieldset> (navíc lze kombinovat s <legend> pro vytvoření popisku). Takže <fieldset id="podle potřeby"><legend>popisek</legend><input> kolikrát je potřeba</fieldset> - HTML kód.
Pak bych si udělal asi další kontejner na celé to pole bloků a právě k jeho innerHTML ten kód připojoval. Jinak samozřejmě i ten první viditelný blok by měl mít hodnoty name ve stejném duchu jako ostatní, tj. jmeno[], prijmeni[] atd. |
||
Časová prodleva: 12 let
|
0