| 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: 10 let
|
|||
0