Autor Zpráva
sir_lamoid
Profil
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
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
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
Reaguji na sira_lamoida:
<span id="pridani'i'">
Řetězce se v JavaScriptu spojují plusem, tohle je syntaktická chyba.
Joker
Profil
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
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
Reaguji na sira_lamoida:
S i++ žádný problém nebyl. Proč nepoužíváš doporučený innerHTML? Vlastnost outerHTML má slabší podporu.
Joker
Profil
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: