Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery dynamiczne dodawanie pól formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
niebieszki
Witam mam następujacy problem.

Chciałbym utworzyć formularz dodąjacy dane do bazy. Na wstępie użytkownik ma mozliwość wyboru ile danych wprowadzić. Zdjecie ponizej przedstawia formularz na wstepie:



Za pomocą przycisku "dodaj" dodajemy kolejne pola formularza



wszystko odbywa sie za pomocą kodu jquery:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  
  4. $('#add').click(function(){
  5. $('#elements .element:first').clone().appendTo($('#elements')).find('input').val('');
  6. return false;
  7. });
  8.  
  9. });


budowa dokumentu html wyglada nastepujaco:

  1. <tr>
  2. <td>Lp</td>
  3. <td>Nazwa</td>
  4. <td>Imie</td>
  5. <td>select</td>
  6. </tr>
  7. </thead>
  8. <tbody id="elements">
  9. <tr class="element">
  10. <td>1</td>
  11. <td><input type="text" name="nazwa" value="" id="nazwa" /></td>
  12. <td><input type="text" name="imie" value="" id="imie" /></td>
  13. <td>
  14. <option value="1">Pozycja 1</option>
  15. <option value="2">Pozycja 2</option>
  16. </select>
  17. </td>
  18. </tr>
  19. </tbody>
  20. <button id="add">Dodaj</button>
  21. <button id="submit">Wyślij</button>


Wszystko by było fajnie tylko nazwy tych wszystkich pól formularza nie są dynamiczne. Oczywiscie wszystkie maja takie same id i name-y podczac 'klonowania'.

Jak zmienic te nazwy dynamicznie podczas klonowania pol formularza? Może ktoś się spotkał z podobnym problemem?
krowal
Zrób sobie zmienną, która będzie się zwiększać przy dodaniu każdego wiersza do formularza, niech to będzie 'x'. Zamiast atrybutu name="nazwa" użyj name="nazwa[x]" i tak z każdym polem. Potem odbierając z $_POST['name'] dostaniesz tablicę zamiast jednej wartości.
niebieszki
Jasne... tablice zmiennych nie są mi obce, chodzi mi bardziej o to gdzie wytworzyć iteracje tej wartości 'x'.
Przypominam iz tworzone to jest dynamicznie wiec podczas sprawdzania zrodla strony nie wiswietlaja sie te rekordy poza 1 zdefiniowanym na sztywno przez php.

Jakiś pomysł?
krowal
No nie bardzo rozumiem twój problem, robisz sobie globalną zmienną (var x = 0;), która zwiększa się przy każdym wywołaniu add() i umieszczasz ją w atrybucie name wstawianego elementu (el.attr('name', 'name['+(x++)+']')). Wartość atrybutu 'name' każdego inputa wchodzącego w skład nowego rekordu możesz sobie wyciągnąć wycinając z jego wartości część z nawiasami kwadratowymi np za pomocą replace().
niebieszki
teraz mój kod wygląda następująco. Wszystko zrobiłem tak jak mi radziłeś.

  1. var x = 0;
  2. $('#add').click(function(){
  3. $('#elements .element:first').clone().appendTo($('#elements')).find('input').val('');
  4. $('#nazwa').attr('name', 'nazwa['+(x++)+']');
  5. return false;
  6. });


Problem na jaki teraz napotkałem to taki:

--- przed kliknieceim dodaj----
pierwszy wiersz (name = nazwa[0])

--- pierwsze klikniecie (dodanie kolejnego wiersza) ----
pierwszy wiersz (name = nazwa[1])
drugi wiersz (name = nazwa[1])


--- drugie klikniecie (dodanie kolejnego wiersza) ----
pierwszy wiersz (name = nazwa[2])
drugi wiersz (name = nazwa[1])
trzeci wiersz (name = nazwa[2])

--- trzecie klikniecie (dodanie kolejnego wiersza) ----
pierwszy wiersz (name = nazwa[3])
drugi wiersz (name = nazwa[1])
trzeci wiersz (name = nazwa[2])
czwarty wiersz (name = nazwa[3])

itd.

Wiec mój utworzony za pomocą html-a wiersz (pierwszy bez js) zmienia swoja nazwę zgodnie z tym ostatnio utworzonym. Jak temu zapobiec? tzn aby każdy z nowo utworzonych wierszy miał indywidualną nazwę?
krowal
Zauważ, że za każdym razem tworzysz inputy o tych samych id co jest niedopuszczalne ponieważ w dokumencie nie może być więcej niż 1 elementów o tym samym id. Przy kazdym dodaniu odwołujesz się do elementu o id '#nazwa', JQ wyszukuje pierwszy element z takim id i zmienia mu atrybut name.

Po prostu musisz zmieniać też id nowo stworzonych elementów.
niebieszki
no tak... masz racje z tym id... tylko jakim sposobem sklonować wiersz tabeli od razu z nowymi wartościami?
Podczas klonowania tym kodem tworzą się 2 identyczne wiersze o tych samych name i id. Nawet gdy moje id będzie także zmienna tablicową to p sklonowaniu będzie miała taki sam index i podczas próby zmiany tak jak pisałeś zedytuję się element o pierwszym napotkanym id.

Czytałem w dokumentacji jquery o funkcjach appendTo() i clone() i nie widze mozliwości aby zmieniać id podczas wywołania tej funkcji.

krowal
A tak nie zadziała ?
[JAVASCRIPT] pobierz, plaintext
  1. var newRow = $('#elements .element:first').clone();
  2. newRow.find('input[name="nazwa[0]"]').attr('id', 'noweId');
  3. newRow.find('input[name="imie[0]"]').attr('id', 'noweId');
  4. newRow.appendTo($('#elements'));
[JAVASCRIPT] pobierz, plaintext
niebieszki
Super dziękuje bardzo za pomoc. Po kilku zmianach kod docelowy wygląda następująco:
[JAVASCRIPT] pobierz, plaintext
  1. var x = 0;
  2. $('#add').click(function(){
  3. var newRow = $('#elements .element:first').clone();
  4.  
  5. newRow.find('input[name="name[0]"]').attr('id', 'name['+x+']');
  6. newRow.find('input[id="name['+x+']"]').attr('name', 'name['+(x)+']');
  7.  
  8. newRow.find('input').val('');
  9.  
  10. newRow.appendTo($('#elements'));
  11. return false;
  12. });
[JAVASCRIPT] pobierz, plaintext

Nie wiem czy to jest poprawnie... ale działa jak należy smile.gif Jeszcze raz dzięki Krowal za naprowadzenie na rozwiązanie.
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.