Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Dynamiczne tworzenie 2 pól input w formularzu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Savage.Mephisto
28.07.2009, 08:50:45
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 
  1. <form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
  2.     <fieldset>
  3.         <span class="link1"><a href="#" id="dodaj_cene">Dodaj cenę</a></span>
  4.         <label style="text-align: center;">
  5.             <input type="hidden" value="'.$id.'" name="dzial" />
  6.             <input style="width: 200px;" type="submit" value="Zapisz" />
  7.         </label>
  8.     </fieldset>
  9. </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 
  1. <form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
  2.     <fieldset>
  3.         <label>
  4.             <span class="opis">Nazwa:</span>
  5.             <input type="text" name="nazwa" />
  6.         </label>
  7.         <span class="link1" style="display: block; text-align: left; padding: 20px 0px;"><a href="#" id="dodaj">Dodaj cenę i rozmiar</a></span>
  8.         <label>
  9.             <span class="opis">Kolor:</span>
  10.         </label>
  11.         '.$checkbox_txt.'
  12.         <label>
  13.             <span class="opis">Opis:</span><br />
  14.             <textarea class="mceEditor" name="opis" rows="" cols=""></textarea>
  15.         </label>
  16.         <br />
  17.         <label>
  18.             <span class="opis">Zdjęcie duże:</span>
  19.             <input type="file" name="fileImage" />
  20.         </label>
  21.         <br /><br />
  22.         <label>
  23.             <span class="opis">Aktywny:</span>
  24.             <select name="active" style="width: 200px;">
  25.                 <option value="t" selected="selected">Tak</option>
  26.                 <option value="n">Nie</option>
  27.             </select>
  28.         </label>
  29.         <br />
  30.         <label>
  31.             <span class="opis">Dostępność:</span>
  32.             <select name="dostepnosc" style="width: 200px;">
  33.                 <option value="produkt dostępny" selected="selected">produkt dostępny</option>
  34.                 <option value="produkt chwilowo niedostępny">produkt chwilowo niedostępny</option>
  35.                 <option value="produkt niedostępny">produkt niedostępny</option>
  36.             </select>
  37.         </label>
  38.         <br /><br />
  39.         <label style="text-align: center;">
  40.             <input type="hidden" value="'.$id.'" name="dzial" />
  41.             <input style="width: 200px;" type="submit" value="Zapisz" />
  42.         </label>
  43.     </fieldset>
  44. </form>
[HTML] pobierz, plaintext
erix
28.07.2009, 11:46:21
Cytat
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. ;]

Cytat
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
28.07.2009, 12:40:27
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
28.07.2009, 13:11:33
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. tongue.gif
Savage.Mephisto
28.07.2009, 13:21:27
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
28.07.2009, 13:32:05
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
28.07.2009, 13:47:22
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
28.07.2009, 13:52:05
Ja nie pisałem, że trzeba poza, tylko w fieldset.
Savage.Mephisto
29.07.2009, 09:13:06
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 
  1. <form name="formularz" class="art_edit" enctype="multipart/form-data" action="?go=towarinsert_" method="post">
  2.     <fieldset>
  3.         <label>
  4.             <span class="opis">Nazwa:</span>
  5.             <input type="text" name="nazwa" />
  6.         </label>
  7.         <br />
  8.         <button id="add">dodaj cenę i rozmiar</button>
  9.         <br /><br />
  10.         <div id="elements">
  11.             <div class="element">
  12.                 <label>Cena: <input type="text" name="cena[]"></label><br />
  13.                 <label>Rozmiar: <input type="text" name="rozmiar[]"></label><br />
  14.                 <a href="#">usuń</a>
  15.             </div>
  16.         </div>
  17.         <br />
  18.         <label>
  19.             <span class="opis">Opis:</span><br />
  20.             <textarea class="mceEditor" name="opis" rows="" cols=""></textarea>
  21.         </label>
  22.         <br />
  23.         <label>
  24.             <span class="opis">Zdjęcie duże:</span>
  25.             <input type="file" name="fileImage" />
  26.         </label>
  27.         <br /><br />
  28.         <label>
  29.             <span class="opis">Dodatkowe zdjęcie duże:</span>
  30.             <select name="second_pict" style="width: 200px;" onchange="addField(this)">
  31.                 <option value="n" selected="selected">Nie</option>
  32.                 <option value="t">Tak</option>
  33.             </select>
  34.         </label>
  35.         <label id="t">
  36.         </label>
  37.         <br />
  38.         <label>
  39.             <span class="opis">Aktywny:</span>
  40.             <select name="active" style="width: 200px;">
  41.                 <option value="t" selected="selected">Tak</option>
  42.                 <option value="n">Nie</option>
  43.             </select>
  44.         </label>
  45.         <br />
  46.         <label>
  47.             <span class="opis">Dostępność:</span>
  48.             <select name="dostepnosc" style="width: 200px;">
  49.                 <option value="produkt dostępny" selected="selected">produkt dostępny</option>
  50.                 <option value="produkt chwilowo niedostępny">produkt chwilowo niedostępny</option>
  51.                 <option value="produkt niedostępny">produkt niedostępny</option>
  52.             </select>
  53.         </label>
  54.         <br /><br />
  55.         <label style="text-align: center;">
  56.             <input type="hidden" value="'.$id.'" name="dzial" />
  57.             <input style="width: 200px;" type="submit" value="Zapisz" />
  58.         </label>
  59.     </fieldset>
  60. </form>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.