[jQuery] Dynamiczne tworzenie 2 pól input w formularzu Opcje

[Savage.Mephisto]

Mam problem z napisaniem działającej funkcji przy użyciu frameworka jQuery w wersji 1.3.2. Jej zadaniem ma być dynamiczne dodawanie 2 pól typu input i opcjonalnie ich kasowanie (name="cena[]" oraz name="rozmiar[]"). Na razie napisałem kod odpowiedzialny za dodawanie jednego inputa.

Kod

<script type="text/javascript">
// <![CDATA[
    $(document).ready(
    function() {
        $("#dodaj_cene").click(function() {
            var new_label = $("<label></label>");
            var new_input = $("<input type=\'text\' name=\'cena[]\' />");
             var new_link = $("<a></a>");
            new_link.attr("href", "#");
            new_link.html("usuń");
            new_link.click(function() {
                $(this).parent("label").remove();
                return false;
            });
            new_label.append(new_input);
            new_label.append(new_link);
            $("form[name=formularz]").append(new_label);
            return false;
        });
    });
// ]]>
</script>

[HTML] pobierz, plaintext 
<form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
    <fieldset>
        <span class="link1"><a href="#" id="dodaj_cene">Dodaj cenę</a></span>
        <label style="text-align: center;">
            <input type="hidden" value="'.$id.'" name="dzial" />
            <input style="width: 200px;" type="submit" value="Zapisz" />
        </label>
    </fieldset>
</form>
[HTML] pobierz, plaintext 

Niestety po kliknięciu na link "Dodaj cenę" nic nie fuka, nic nie buczy.
Pomoże ktoś?


Usprawniłem nieco skrypt odpowiedzialny za dodawanie 2 dynamicznych inputów, ale kilka problemów zaprząta mi głowę. Po pierwsze po kliknięciu na link 'Dodaj cenę rozmiar' pojawiają się co prawda 2 dynamiczne inputy, tyle że pod formularzem (chciałbym aby wyświetlały się pod nazwą produktu). W dodatku trudność stanowi dla mnie usunięcie 2 niepotrzebnych inputów (na razie działa kasowanie tylko jednego inputa z rozmiarem). Nie jestem specjalistą od jQuery, więc proszę o wyrozumiałość i pomoc.

Kod

<script type="text/javascript">
// <![CDATA[
     $(document).ready(
     function() {
         $("#dodaj").click(function() {
             var new_label1 = $("<label>Cena: </label>");
             var new_label2 = $("<label>Rozmiar: </label>");
             var new_input1 = $("<input type=\'text\' name=\'cena[]\' />");
             var new_input2 = $("<input type=\'text\' name=\'rozmiar[]\' />");
             var new_link = $("<a></a>");
             new_link.attr("href", "#");
             new_link.html("usuń");
             new_link.click(function() {
                 $(this).parents("label").remove();
                 return false;
             });
             new_label1.append(new_input1);
             new_label2.append(new_input2);
             new_label1.append(new_link);
             new_label2.append(new_link);
             $("form[name=formularz]").append(new_label1);
             $("form[name=formularz]").append(new_label2);
             return false;
         });
     });
// ]]>
</script>

[HTML] pobierz, plaintext 
<form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
    <fieldset>
        <label>
            <span class="opis">Nazwa:</span>
            <input type="text" name="nazwa" />
        </label>
        <span class="link1" style="display: block; text-align: left; padding: 20px 0px;"><a href="#" id="dodaj">Dodaj cenę i rozmiar</a></span>
        <label>
            <span class="opis">Kolor:</span>
        </label>
        '.$checkbox_txt.'
        <label>
            <span class="opis">Opis:</span><br />
            <textarea class="mceEditor" name="opis" rows="" cols=""></textarea>
        </label>
        <br />
        <label>
            <span class="opis">Zdjęcie duże:</span>
            <input type="file" name="fileImage" />
        </label>
        <br /><br />
        <label>
            <span class="opis">Aktywny:</span>
            <select name="active" style="width: 200px;">
                <option value="t" selected="selected">Tak</option>
                <option value="n">Nie</option>
            </select>
        </label>
        <br />
        <label>
            <span class="opis">Dostępność:</span>
            <select name="dostepnosc" style="width: 200px;">
                <option value="produkt dostępny" selected="selected">produkt dostępny</option>
                <option value="produkt chwilowo niedostępny">produkt chwilowo niedostępny</option>
                <option value="produkt niedostępny">produkt niedostępny</option>
            </select>
        </label>
        <br /><br />
        <label style="text-align: center;">
            <input type="hidden" value="'.$id.'" name="dzial" />
            <input style="width: 200px;" type="submit" value="Zapisz" />
        </label>
    </fieldset>
</form>
[HTML] pobierz, plaintext 

Ten post edytował Savage.Mephisto 28.07.2009, 08:51:31

[erix]

2 dynamiczne inputy, tyle że pod formularzem (chciałbym aby wyświetlały się pod nazwą produktu).

Zapomniałeś chyba o tym, że wszystkie elementy objąłeś w fieldset. ;]

W dodatku trudność stanowi dla mnie usunięcie 2 niepotrzebnych inputów (na razie działa kasowanie tylko jednego inputa z rozmiarem).

Puść gdzieś to na żywo.

[Savage.Mephisto]

Erix, dzięki za jakiekolwiek zainteresowanie.
Działanie skryptu można zobaczyć pod adresem: http://www.stronyinternetowe.radom.pl/paola/new/index.php.
Proszę o jakieś wskazówki, które pomogą mi poprawić wyżej wymieniony skrypt.

[erix]

Ok, na pierwszy rzut oka wygląda to tak:
Link masz po prostu w jednym label, a po wskazaniu na parents() zwracany jest tylko on. Sąsiedniego (z drugim polem) już nie uzyskujesz.

Swoją drogą, nie mogę pojąć jednego, czemu sobie tak utrudniasz życie:

Kod

var new_link = $("<a></a>");
            new_link.attr("href", "#");
            new_link.html("usuń");

Skoro i tak używasz innerHTML (vide: pierwsza linijka). Gdybyś robił w czystym DOM, to rozumiem - ale tutaj jest bez sensu.

[Savage.Mephisto]

Erix, nie jestem alfą i omegą jeśli chodzi o pisanie skryptów przy wykorzystaniu jQuery. Zresztą wcześniej o tym wspomniałem. Stąd to utrudnianie sobie życia. Nie mam zielonego pojęcia, jak to ugryźć, aby kod był w pełni funkcjonalny.

[erix]

Najlepiej będzie po prostu jeden wiersz (z oboma polami, linkiem do kasowania) objąć w jakiegoś diva i to jego kasować, a nie każdego labela z osobna.

[Savage.Mephisto]

Oki, to jeden problem z głowy. A jak w takim razie zmusić te dynamiczne inputy, aby ładowały się w formularzu pod polem nazwa? Wyrzucenie linka poza forma i fieldset nie dało oczekiwanych rezultatów.

[erix]

Ja nie pisałem, że trzeba poza, tylko w fieldset.

[Savage.Mephisto]

Dla zainteresowanych tematem.
Całkowicie od nowa napisałem skrypt i jego wersja finalna wygląda tak:

Kod

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
    $(\'#elements .element a\').live(\'click\', function(){
       var parent = $(this).parent();
       if($(\'#elements .element\').index(parent)>0) parent.remove();
       return false;
    });
    $(\'#add\').click(function(){
       $(\'#elements .element:first\').clone().appendTo($(\'#elements\')).find(\'input\').val(\'\');
       return false;
    });
});  
// ]]>
</script>

[HTML] pobierz, plaintext 
<form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
    <fieldset>
        <label>
            <span class="opis">Nazwa:</span>
            <input type="text" name="nazwa" />
        </label>
        <br />
        <button id="add">dodaj cenę i rozmiar</button>
        <br /><br />
        <div id="elements">
            <div class="element">
                <label>Cena: <input type="text" name="cena[]"></label><br />
                <label>Rozmiar: <input type="text" name="rozmiar[]"></label><br />
                <a href="#">usuń</a>
            </div>
        </div>
        <br />
        <label>
            <span class="opis">Opis:</span><br />
            <textarea class="mceEditor" name="opis" rows="" cols=""></textarea>
        </label>
        <br />
        <label>
            <span class="opis">Zdjęcie duże:</span>
            <input type="file" name="fileImage" />
        </label>
        <br /><br />
        <label>
            <span class="opis">Dodatkowe zdjęcie duże:</span>
            <select name="second_pict" style="width: 200px;" onchange="addField(this)">
                <option value="n" selected="selected">Nie</option>
                <option value="t">Tak</option>
            </select>
        </label>
        <label id="t">
        </label>
        <br />
        <label>
            <span class="opis">Aktywny:</span>
            <select name="active" style="width: 200px;">
                <option value="t" selected="selected">Tak</option>
                <option value="n">Nie</option>
            </select>
        </label>
        <br />
        <label>
            <span class="opis">Dostępność:</span>
            <select name="dostepnosc" style="width: 200px;">
                <option value="produkt dostępny" selected="selected">produkt dostępny</option>
                <option value="produkt chwilowo niedostępny">produkt chwilowo niedostępny</option>
                <option value="produkt niedostępny">produkt niedostępny</option>
            </select>
        </label>
        <br /><br />
        <label style="text-align: center;">
            <input type="hidden" value="'.$id.'" name="dzial" />
            <input style="width: 200px;" type="submit" value="Zapisz" />
        </label>
    </fieldset>
</form>
[HTML] pobierz, plaintext