Předání dat ze šablony do formuláře (po odeslání)

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Jarek92
Člen | 91
+
0
-

Zdravím,
řeším problém formuláře, který má za úkol vložit článek na web. K tomuto článku se pojí také tagy, kterých může být 1 až N. Prozatím to mám řešené následovně: Mám jeden text input, pomocí kterého vkládám jednotlivé tagy pomocí JS funkce pod tento text input do HTML struktury. Po odeslání formuláře bych však chtěl dostat data z této HTML šablony (divů) do formuláře tak, abych s nimi mohl pracovat.

Ukázka definice formuláře:

public function create() {
        $form = new Form();
        $form->addText("title")
             ->setRequired("Zadej prosím nadpis článku.");
        $form->addTextArea("content")
             ->setAttribute("rows", 15)
             ->setAttribute("cols", 7)
             ->setRequired("Zadej prosím text článku.");
        $form->addCheckboxList("categories", null, $this->categories);
        $form->addText("tags")
             ->setAttribute("size", 30)
             ->setRequired("Zadej prosím alespoň jedno související téma.");
        $form->addButton("addTag");
        $form->addRadioList("publishedAt", null, array("now" => "Publikovat ihned", "later" => "Naplánovat na"));
        $form->addText("day")
             ->setAttribute("size", 2)
             ->setRequired("Zadej prosím den vydání.")
             ->addRule(Form::RANGE, "Den musí být číselná hodnota v intervalu %d až %d.", array(1, 31))
             ->setDefaultValue(date("j"));
        $form->addSelect("month")
             ->setItems(DateTimeUtils::getMonths(), true)
             ->setDefaultValue(date("n"));
        $form->addSelect("year")
             ->setItems(DateTimeUtils::getYears(), false)
             ->setDefaultValue(date("Y"));
        $form->addText("hour")
             ->setAttribute("size", 2)
             ->setRequired("Zadej prosím hodinu vydání.")
             ->addRule(Form::RANGE, "Hodina musí být číselná hodnota v intervalu %d až %d.", array(0, 23))
             ->setDefaultValue(date("H"));
        $form->addText("minute")
             ->setAttribute("size", 2)
             ->setRequired("Zadej prosím minutu vydání.")
             ->addRule(Form::RANGE, "Minuta musí být číselná hodnota v intervalu %d až %d.", array(0, 59))
             ->setDefaultValue(date("i"));
        $form->addSubmit("submit", "Publikovat článek");
        $form->onSuccess[] = array($this, "addArticleFormSucceeded");
        return $form;
    }

Vykreslení v šabloně

{block content}
<h1 n:block="title">Přidat nový článek</h1>
<p>
    <form n:name=addArticleForm>
        <ul class="errors" n:if="$form->hasErrors()">
            <li n:foreach="$form->errors as $error">{$error}</li>
        </ul>
        <div class="form-group">
            <label n:name=title>Nadpis</label>
            <input n:name=title class="form-control">
        </div>
        <div class="form-group">
            <label n:name=content>Obsah</label>
            <textarea n:name=content class="form-control"></textarea>
        </div>
        <div class="form-group">
            <label>Kategorie</label>
            <div class="checkbox">
            {foreach $form[categories]->items as $key => $label}
                <label n:name="categories:$key">
                    <input n:name="categories:$key"> {$label}
                </label>
                {sep}&nbsp;&nbsp;&nbsp;&nbsp;{/sep}
            {/foreach}
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-12">
                <label n:name=tags>Související témata</label>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-sm-4">
                <input n:name=tags class="form-control" id="tags">
            </div>
            <div class="form-group col-sm-8">
                <button n:name=addTag class="btn btn-success" id="addTag">Přidat</button>
            </div>
        </div>
        <div id="duplicateTags">
        </div>
        <div id="tempTags">
        </div>
        <div class="form-group">
            <label>Datum vydání</label>
            <div class="checkbox">
            {foreach $form[publishedAt]->items as $key => $label}
                <label n:name="publishedAt:$key">
                    <input n:name="publishedAt:$key"> {$label}
                </label>
                {sep}<br />{/sep}
            {/foreach}
            </div>
        </div>
        <div class="datePlan" id="now">
        </div>
        <div class="datePlan hidden" id="later">
            <input n:name=day>.
            <select n:name=month></select>
            <select n:name=year></select> v
            <input n:name=hour> :
            <input n:name=minute> hodin
        </div>

        <input type="hidden" name="ahojky" value="tag 1">

        <div class="form-group">
            <input n:name=submit class="btn btn-primary btn-lg">
        </div>

    </form>
</p>
<script>
    function removeTag(div) {
        $('#' + div.id).remove();
    }
</script>
{/block}

JS kód:

<script>
$("#addTag").click(function(){
    var value = $('#tags').val();
    addTag(value);
  });

  function addTag(value) {
    var tag = value.toLowerCase();
    var patt = /^[a-z0-9 ěščřžýáíéúůňďťó]+$/g;
    var isOK = patt.test(tag);
    $("#duplicateTags").empty();
    if(tag.length === 0) {
        $("#duplicateTags").append("<strong><span style='color:red;'>Zadej prosím tag.</span></strong>");
    }
    else if(!isOK) {
        $("#duplicateTags").append("<strong><span style='color:red;'>V zadaném tagu máš nepovolené znaky.</span></strong>");
    }
    else {
        var str = tag.replace(/\s/g, '');
        if($("#" + str).length > 0) {
            $("#duplicateTags").append("<strong><span style='color:red;'>Zadaný tag už si jednou vybral!</span></strong>");
        }
        else {
            $("#tempTags").append("<div id='" + str + "' class='tag'>" + tag + ' <button type="button" onclick="removeTag(' + str + ');">Odebrat</button></div>');
            $("#tags").val("");
        }
    }
  }
</script>

Jak byste následující případ vyřešili vy? Resp., jak byste na to šli?

Editoval Jarek92 (24. 9. 2016 8:58)

lutor
Člen | 27
+
0
-

Ahoj,
nejjednodušší řešení je přes přidané tagy vkládat kromě „náhledových divů/spanů“ také do (hidden) fieldů a poté si jejich data po odeslání získat přes $form->getHttpData(). Data z divů do formuláře po odeslání nedostaneš, nepřenesou se ti, obsah si musíš ukládat do formulářových prvků.

n.u.r.v.
Člen | 485
+
0
-

jj, dělám to podobně jako @lutor s tím rozdílem, že nepoužívám hidden, ale klasický input, který pomocí css skryju a pak nemusím používat $form->getHttpData()

Jarek92
Člen | 91
+
0
-

Ahoj, díky oběma, nakonec jsem to tak udělal. Úplně jsem totiž zapomněl na možnost metody getHttpData();. Díky :)