Autor Zpráva
frauen
Profil *
Zdravím,

potřeboval bych pomoci s přípravou jídelního a nápojového lístku, které by měly mít následující podobu:

Jídelní listek:
{Kategorie} - {Kategorie - doplňující info}

{Číslo}. {Název} {Cena}
{Stručný popis}


Pokud bude vyplněn stručný popis, název se vyznačí tučně.

U nápojového lístku to bude obdobné, akorát bude vynecháno číslo a nebude platit podmínka pro vyznačení názvu tučně.

Představoval bych si to asi tak, že někde budou tlačítka: Přidat kategorii, Přidat položku. Po kliknutí se přidají příslušné položky.

Při kliknutí na Přidat kategorii se přidá do formuláře:
{input pro Kategorie} - {input pro Kategorie - doplňující info}

Při kliknutí na Přidat položku se přidá do formuláře:
{Číslo} {input pro Název} {input pro Cena}
{textarea pro Stručný popis}


Pozn.: Číslo - hodnota se vygeneruje automaticky podle aktuálního pořadí položky - 1. až n.

Zároveň vedle každé kategorie a položky bude tlačítko Odstranit.
Používám na svém webu několik věcí pomocí jQuery - ColorBox, dropdown menu apod. tak pokud by bylo možné řešení udělat pomocí jQuery.

Všem bych chtěl mnohokrát předem poděkovat za rady a pomoc.
Marek88
Profil
Pokud vůbec nevíš, jak to udělat, tak se to spíš hodí do kategorie "práce a zakázky".

Pokud si nevíš rady jen s tím přidáváním inputů, tak zkus tohle http://www.zaachi.com/cs/items/dynamicke-pridavani-elementu-formulare.html

Jestli to chceš v jquery, tak asi nebude těžké to vygooglit na dotaz "dynamické přidávání inputů jquery" nebo tak nějak...
frauen
Profil *
Jedná se mi pouze o to vytváření a odstraňování inputů / textarea, proto jsem to umístil do JS.

Každopádně díky za odkaz a radu, co mám hledat, mrknu se na to.

Pokud by se našel někdo, kdo má další radu či by mi nějak pomohl, budu vděčný.
frauen
Profil *
Prozatím jsem dal dokupy toto:
$(document).ready(function() {
    var categoryId = 0;
    $("#button-category").click(function(){
        var category = "<p id='category-"+ categoryId + "'>Kategorie " + categoryId + ":<br><input type='text' size='40'><button onclick='removeCategory(" + categoryId + ");'>Odebrat</button></p>";
        $("#form-content").append(category);
        categoryId++;
    });

    function removeCategory(id) {
        $("#category-" + id).remove();
    }
});

Přidávání funguje, odebrání však nikoliv. V čem je, prosím, chyba? Je vůbec dobré řešení to, co jsem prozatím vytvořil, zda neobsahuje nějaké chyby apod.?
Kcko
Profil

$(document).ready(function() {
    var categoryId = 0;
    $("#button-category").click(function(){
        var category = "<p id='category-"+ categoryId + "'>Kategorie " + categoryId + ":<br><input type='text' size='40'><button onclick='removeCategory(" + categoryId + ");'>Odebrat</button></p>";
        $("#form-content").append(category);
        categoryId++;
    });


});

    function removeCategory(id) {
        $("#category-" + id).remove();
    }

frauen
Profil *
Kcko:
Proč musí být funkce takto odděleně?
Chamurappi
Profil
Reaguji na frauena:
V čem je, prosím, chyba?
Funkce removeCategory je lokální a z onclicku lze zavolat jen globálně dostupné funkce.

Je vůbec dobré řešení to, co jsem prozatím vytvořil, zda neobsahuje nějaké chyby apod.?
Ani moc ne. Máš v úmyslu mít nesouvislou řadu čísel? Když někdo vyrobí pět kategorií a pak třetí vyhodí, bude po druhé hned čtvrtá. Nech přečíslovávání na prohlížeči — nepřidávej odstavce, ale položky číslovaného seznamu.

Proč musí být funkce takto odděleně?
Nemusí být vůbec odděleně. Napsal bych to takhle:
$(document).ready(function() {
    $("#button-category").click(function(){
        var category = $("<li>kategorie: <br><input type='text' size='40'><button type='button'>Odebrat</button></li>");
        category.find("button").click(function()
        {
          category.remove();
        });
        $("#ídéčko-číslovaného-seznamu").append(category);
    });
});
frauen
Profil *
Chamurappi:
Díky, to mě nenapadlo, funguje to dobře.

Chtěl bych ještě doplnit přidávání položek pod jednotlivé kategorie. Bude to zřejmě víceméně to samé, akorát si myslím, že by bylo vhodné použít vnořené seznamy, ale nevím, jak to napsat v tom js. Mohl bych poprosit o nápovědu? Díky.
frauen
Profil *
Vypadá to, že jsem nakonec dal dohromady funkční řešení.

Chtěl bych se jen zeptat, proč nefunguje "Odebrat", když dám jednu kategorii předem napevno do formu (uplně stejný obsah jako kdybych přidal dynamicky přes tlačítko)?

Také bych se chtěl zeptat, jakým způsobem udělat to, že když formulář odešlu a budu mít někde nevyplněnou kategorii a zobrazím pomocí php hlášení, že nebyla vyplněna některá z kategorií, aby se mi zobrazily zpět kategorie a položky s odeslanými daty?

JS:
$(document).ready(function(){
    $("#button-category").click(function(){
        var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>");
        category.find("button").click(function(){
            category.remove();
        });
        $("#form-content").append(category);
    });
    $("#button-item").click(function(){''
        var item = $("<p>Položka:<br><input type='text' name='item[]' size='80'> Cena: <input type='text' size='5'> <button type='button'>Odebrat</button><br>Popis:<br><textarea cols='50' rows='2' name='descripion[]'></textarea></p>");
        item.find("button").click(function(){
            item.remove();
        });
        $("#form-content").append(item);
    });
});


PHP (HTML):
<?php
if (isset($_POST['sent'])) {
    if(empty($_POST['category'])) {
        $error = 'Nebyla přidána žádná kategorie.';
    } else {
        for ($i = 0; $i < count($_POST['category']); $i++) {
            if (empty($_POST['category'][$i])) {
                $error = 'Nebyla vyplněna kategorie.';
            }
        }
    }

    // Error
    if (isset($error)) {
        echo $error;
    }
}

?>
<form action="" method="post" id="list">
    <div id="form-content">
        <p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button">Odebrat</button></p>
    </div>
    <p id="buttons">
        <input type="hidden" name="sent">
        <input type="submit" value="Upravit">
    </p>
</form>

Děkuji mnohokrát.
frauen
Profil *
Opravdu mi nikdo neporadí? Potřeboval bych problém vyřešit, abych mohl pokračovat. Děkuji.
Chamurappi
Profil
Reaguji na frauena:
Potřeboval bych problém vyřešit, abych mohl pokračovat.
To jsi nám dal dobrou motivaci :-)
Viz osmé závazné pravidlo.

Chtěl bych se jen zeptat, proč nefunguje "Odebrat", když dám jednu kategorii předem napevno do formu
Protože mu nic nenastavilo, že by mělo odebírat. Asi by bylo jednodušší mu dát rovnou atribut:
<button … onclick="this.parentNode.parentNode.removeChild(this.parentNode)">
… a s tím ho můžeš generovat i do HTML, i v tom skriptu (místo category.find("button").click).
frauen
Profil *
Omlouvám se za osmé pravidlo, ale nevěděl jsem, jak uživatele oživit pro případnou radu či pomoc.

Chamurappi:
… a s tím ho můžeš generovat i do HTML, i v tom skriptu
Díky, určitě vyzkouším a případně použiji.

Jediné, co mi dělá problém, je to, jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat? Děkuji.
_es
Profil
frauen:
jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat?
Zistíš v PHP, čo návštevník vyplnil a pošleš mu to isté v HTML.
Chamurappi
Profil
Reaguji na frauena:
nevěděl jsem, jak uživatele oživit pro případnou radu či pomoc
Nijak. Trpělivě vyčkávej, jako všichni ostatní, kdo tu hledají pomoc — proto existuje to pravidlo.

Jak bych měl postupovat?
Vygenerovat je v PHP cyklem a s vyplněným atributem value. (Samozřejmě patřičně ošetřeným, aby ten řetězec nemohl v HTML způsobit problémy.)
frauen
Profil *
Použil jsem pro první pevnou položku Kategorie:
<p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button" onclick="$(this).closest('p').remove();">Odebrat</button></p>
Což funguje, ale nevím, zda je to správné řešení (?).

_es:
„jak po odeslání formuláře zpětně zobrazit odeslané elementy s jejich odeslanými daty. Jak bych měl postupovat?“
Zistíš v PHP, čo návštevník vyplnil a pošleš mu to isté v HTML.
Chápu to správně, že po odeslání položek si musím nějak uložit odeslaná data a ty pak nějak obalit příslušnými inputy apod. a opět zobrazit?
_es
Profil
frauen:
Chápu to správně, že po odeslání položek si musím nějak uložit odeslaná data
Prečo by si ich musel niekam ukladať? Veď PHP skript k nim má prístup.

ty pak nějak obalit příslušnými inputy apod. a opět zobrazit?
Áno.
frauen
Profil *
Jak mám následující udělat v JS? Potřebuju tam nějak doplnit obsah onclick.
<p class="category">Kategorie: <input type="text" name="category[]" size="50"> <button type="button" onclick="$(this).closest('p').remove();">Odebrat</button></p>

JS:
var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>");
Chamurappi
Profil
Reaguji na frauena:
Což funguje, ale nevím, zda je to správné řešení (?).
Bude to pomalejší než mnou uvedený kód kvůli použití jQuery (a hlavně Sizzlu v něm na vyhodnocování selektoru). Jinak to udělá v podstatě totéž.
_es
Profil
frauen:
tam nějak doplnit obsah onclick
To som nejak nepochopil, kam „tam“, aký „obsah“?
Chamurappi
Profil
Reaguji na _es:
Jestli jsem to správně pochopil, tak neví, jak dostat ten atribut onclick dovnitř řetězce s HTML kódem. Nejspíš ho trápí uvozovky, asi je neumí správným způsobem escapovat.
frauen
Profil *
_es:
„tam nějak doplnit obsah onclick“
To som nejak nepochopil, kam „tam“, aký „obsah“?

HTML:
onclick="$(this).closest('p').remove();"

do

JS:
var category = $("<p class='category'>Kategorie: <input type='text' name='category[]' size='50'> <button type='button'>Odebrat</button></p>");
_es
Profil
frauen:
Do textového reťazca v JS ohraničeného úvodzovkami ("text") vložíš úvodzovky pomocou dvojice znakov \" ("text\"pokračovanie textu").
Chamurappi
Profil
Reaguji na frauena:
A dovnitř HTML atributu můžeš uvozovky/apostrofy, kterými je atribut ohraničen, vepsat entitou.
Kdybys použil můj onclick, neměl bys problém s uvozovkami :-)
frauen
Profil *
Snažím se vypsat odeslané kategorie a položky, ale mám menší problém. Špatně se mi vypisují položky. V čem je, prosím, problém?

JS:
$(document).ready(function(){
    var categoryId = 0;
    $("#button-category").click(function(){
        var category = $("<p class=\"category\">Kategorie " + categoryId + ": <input type=\"text\" name=\"category[]\" size=\"50\"> <button type=\"button\" onclick=\"$(this).closest('p').remove();\">Odebrat</button></p>");
        $("#form-content").append(category);
        categoryId++;
    });
    $("#button-item").click(function(){
        var item = $("<p>Položka:<br><input type=\"text\" name=\"item[" + (categoryId - 1) + "][]\" size=\"80\"> Cena: <input type=\"text\" name=\"price[" + (categoryId - 1) + "][]\" size=\"5\"> <button type=\"button\" onclick=\"$(this).closest('p').remove();\">Odebrat</button><br>Popis:<br><textarea cols=\"50\" rows=\"2\" name=\"description[" + (categoryId - 1) + "][]\"></textarea></p>");
        $("#form-content").append(item);
    });
});


PHP:
for ($i = 0; $i < count($_POST['category']); $i++) {
    echo '<p class="category">Kategorie: <input type="text" name="category[]" size="50" value="' . $_POST['category'][$i] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button></p>';
    for ($j = 0; $j < count($_POST['item']); $j++) {
        echo '<p>Položka:<br><input type="text" name="item[]" size="80" value="' . $_POST['item'][$i][$j] . '"> Cena: <input type="text" name="price[]" size="5" value="' . $_POST['price'][$i][$j] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button><br>Popis:<br><textarea cols="50" rows="2" name="description[]">' . $_POST['description'][$i][$j] . '</textarea></p>';
    }
}
frauen
Profil *
Chybička byla v PHP:
for ($i = 0; $i < count($_POST['category']); $i++) {
    echo '<p class="category">Kategorie: <input type="text" name="category[]" size="50" value="' . $_POST['category'][$i] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button></p>';
    for ($j = 0; $j < count($_POST['item'][$i]); $j++) {
        echo '<p>Položka:<br><input type="text" name="item[]" size="80" value="' . $_POST['item'][$i][$j] . '"> Cena: <input type="text" name="price[]" size="5" value="' . $_POST['price'][$i][$j] . '"> <button type="button" onclick="$(this).closest(\'p\').remove();">Odebrat</button><br>Popis:<br><textarea cols="50" rows="2" name="description[]">' . $_POST['description'][$i][$j] . '</textarea></p>';
    }
}

Nechápu jen jednu věc, pokud odešlu input s obsahem 0 tak mi špatně fungují podmínky pro ověření. Jak bych měl data ošetřit, prosím?
Witiko
Profil
Chamurappi:
a hlavně Sizzlu v něm
Sizzle je pokusem o co nejbližší interpretaci CSS3 selektorů. Místo Sizzlu je proto v případě podpory využita funkce document.querySelectorAll, kdykoliv je to možné.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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