Dynamické přidávání prvků Formu

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
před 11 lety
mfajfr
Člen | 26
+
0
-

Ahoj,
mám základ formuláře tvořený klasicky přes Nette a k němu přidávám pomocí jQuery další prvky.

Konkrétně to je:
Mám zakázku. Ta může mít 0-N vzorků, která může mít 0-N postupů.

Může to vypadat například takto:

<form action="/zakazky/pridat" method="post" id="frm-offerForm" novalidate="">
    <table>
        <tbody>
            <tr>
                <td><span class="red">*</span><label for="frm-offerForm-id">Číslo zakázky</label></td>
            </tr>
            <tr>
                <td><input type="text" name="id" readonly="" id="frm-offerForm-id" value="201500001"></td>
            </tr>
            <tr>
                <td><span class="red">*</span><label for="frm-offerForm-client_id">Klient</label></td>
            </tr>
            <tr>
                <td><select name="client_id" class="select-client" id="frm-offerForm-client_id"><option value="">---</option><option value="2">FEEL s.r.o.o. - U Lesíka 619, ;46841 Tanvald-Tanvald;Česká republika</option></select></td>
            </tr>
            <tr>
                <td><span class="red">*</span><label for="frm-offerForm-startDate">Datum přijetí:</label></td>
            </tr>
            <tr>
                <td><input type="text" name="startDate" class="datepicker form-control hasDatepicker" id="frm-offerForm-startDate" value="06.02.2015" readonly=""></td>
            </tr>
        </tbody>
    </table>
    <div id="samples">

    <table data-idsample="201500001"><tbody>
<tr>
<td><span class="red">*</span><label for="sample_id[201500001]">Číslo vzorku</label></td>
</tr><tr>
<td><input type="text" id="sample_id[201500001]" class="text-sample-id" name="sample_id[201500001]" readonly="" value="201500001"><a href="javascript:void();" data-idsample="201500001" class="delete-sample">X</a></td>
</tr><tr>
<td><span class="red">*</span><label for="sample_name[201500001]">Název</label></td>
</tr><tr>
<td><input type="text" class="text-sample-name" id="sample_name[201500001]" name="sample_name[201500001]"></td>
</tr><tr>
<td><span class="red">*</span><label for="sample_description[201500001]">Popis</label></td>
</tr><tr>
<td><textarea id="sample_description[201500001]" class="textarea-sample-description" name="sample_description[201500001]"></textarea></td>
</tr><tr>
<td><span class="red">*</span>Vyšetření</td>
</tr><tr>
<td><label for="sample_investigation[201500001][microbiology]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500001][microbiology]" name="sample_investigation[201500001]" value="microbiology">Mikrobiologie</label></td>
<td><label for="sample_investigation[201500001][chemistry]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500001][chemistry]" name="sample_investigation[201500001]" value="chemistry">Chemie</label></td>
<td><label for="sample_investigation[201500001][senses]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500001][senses]" name="sample_investigation[201500001]" value="senses">Smyslové posouzení</label></td>
</tr><tr>
<td><span class="red">*</span>Postupy</td>
</tr><tr>
<td><a href="javascript:void();" class="add-sample-procedure" data-idsample="201500001">Přidat postup</a></td>
</tr><tr>
<td><ul class="sample-procedures" data-idsample="201500001"><li>Postup_name_2 - <a href="javascript:void()" class="delete-sample-procedure">X</a>
                    <input type="hidden" name="sample_procedure[201500001][]" value="3">
                </li></ul></td>
</tr><tr>
<td><a href="javascript:void();" data-idsample="201500001" class="clone-sample">Duplikovat</a></td>

</tr>
</tbody></table><table data-idsample="201500002"><tbody>
<tr>
<td><span class="red">*</span><label for="sample_id[201500002]">Číslo vzorku</label></td>
</tr><tr>
<td><input type="text" id="sample_id[201500002]" class="text-sample-id" name="sample_id[201500002]" readonly="" value="201500002"><a href="javascript:void();" data-idsample="201500002" class="delete-sample">X</a></td>
</tr><tr>
<td><span class="red">*</span><label for="sample_name[201500002]">Název</label></td>
</tr><tr>
<td><input type="text" class="text-sample-name" id="sample_name[201500002]" name="sample_name[201500002]" value=""></td>
</tr><tr>
<td><span class="red">*</span><label for="sample_description[201500002]">Popis</label></td>
</tr><tr>
<td><textarea id="sample_description[201500002]" class="textarea-sample-description" name="sample_description[201500002]"></textarea></td>
</tr><tr>
<td><span class="red">*</span>Vyšetření</td>
</tr><tr>
<td><label for="sample_investigation[201500002][microbiology]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500002][microbiology]" name="sample_investigation[201500002]" value="microbiology">Mikrobiologie</label></td>
<td><label for="sample_investigation[201500002][chemistry]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500002][chemistry]" name="sample_investigation[201500002]" value="chemistry">Chemie</label></td>
<td><label for="sample_investigation[201500002][senses]"><input type="checkbox" class="checkbox-investigation" id="sample_investigation[201500002][senses]" name="sample_investigation[201500002]" value="senses">Smyslové posouzení</label></td>
</tr><tr>
<td><span class="red">*</span>Postupy</td>
</tr><tr>
<td><a href="javascript:void();" class="add-sample-procedure" data-idsample="201500002">Přidat postup</a></td>
</tr><tr>
<td><ul class="sample-procedures" data-idsample="201500002"><li>Postup_name_2 - <a href="javascript:void()" class="delete-sample-procedure">X</a>
                    <input type="hidden" name="sample_procedure[201500002][]" value="3">
                </li></ul></td>
</tr><tr>
<td><a href="javascript:void();" data-idsample="201500002" class="clone-sample">Duplikovat</a></td>

</tr>
</tbody></table></div>
    <a href="javascript:void();" id="add-sample">Přidat vzorek</a>

    <input type="submit" name="add" id="frm-offerForm-add" value="Přidat" formnovalidate="">

    </form>

Na form mám daný callback přes onSuccess (zkoušel jsem i onSubmit), ale k němu se to nikdy nedostane. Formulář je na nějaké adrese a přijde mi, že při stisknutí „Přidat“ se to přesměruje na tu stejnou adresu, na které je ten formulář. Zkusil jsem vypnout i validaci.

V té metodě na zpracování formuláře mám čistě dumpy.

Předem děkuji.

před 11 lety
akadlec
Člen | 1326
+
0
-

Koukní na form-replicator

před 11 lety
mfajfr
Člen | 26
+
0
-

Nejde to nějak v tomto případě, že bych to vzal „sprostě“ jako POSTy? Moc se mi do toho Replicatoru nechce :D

Udělal jsem si projekt na pokus s Replicatorem:

<?php
public function createComponentBasicForm() {
        $form = new Nette\Forms\Form();
        $form->addSelect('select');

        $samples = $form->addDynamic('samples', function (\Nette\Forms\Container $container) {
            $container->addText('id', 'ID');
        }, 2);

        $samples->addSubmit('add', 'Přidat')
                ->setValidationScope(FALSE)
                ->onClick[] = callback($this, 'MyFormAddElementClicked');

        return $form;
    }

    public function MyFormAddElementClicked(SubmitButton $button) {
        $button->parent->createOne();
    }
?>

po stisknutí tlačítka se mi nový input neudělá.

před 11 lety
David Matějka
Moderator | 6445
+
+1
-

@mfajfr muzes zkusit low level formulare, ale tim prijdes o moznosti snadne validace apod.

Radeji debugguj a zjisti, proc nefunguje replicator :)

před 11 lety
akadlec
Člen | 1326
+
0
-

Tak děláš něco blbě, mě replicator funguje perfektně. Pokud to máš ajaxově tak nezapomeň invalidovat snippety či celý form, záleží na tobě.

Jinak pokud bys trval na tom že nechceš replikator tak se těm políčkům dostaneš jen přes request. Tuším že i do formu se pak přidávala funkčnost na vytažení „čistých“ POST dat.

E: tak druhou možnost již zmínil matěj ;)

Editoval akadlec (6. 2. 2015 21:55)