jquery dynamiczne dodawanie pól formularza, dynamiczne nazwy pol formularza Opcje

[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:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function() {
 
	$('#add').click(function(){
		      $('#elements .element:first').clone().appendTo($('#elements')).find('input').val('');
		      return false;
		   });
 
});
</script>
[HTML] pobierz, plaintext 

budowa dokumentu html wyglada nastepujaco:

[HTML] pobierz, plaintext 
<table>
	<thead>
		<tr>
			<td>Lp</td>
			<td>Nazwa</td>
			<td>Imie</td>
			<td>select</td>
		</tr>
	</thead>
	<tbody id="elements">
		<tr class="element">
			<td>1</td>
			<td><input type="text" name="nazwa" value="" id="nazwa" /></td>
			<td><input type="text" name="imie" value="" id="imie" /></td>
			<td>
				<select>
					<option value="1">Pozycja 1</option>
					<option value="2">Pozycja 2</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>
<button id="add">Dodaj</button>
<button id="submit">Wyślij</button>
[HTML] pobierz, plaintext 

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ś.

[HTML] pobierz, plaintext 
var x = 0;
	$('#add').click(function(){
		      $('#elements .element:first').clone().appendTo($('#elements')).find('input').val('');
		      $('#nazwa').attr('name', 'nazwa['+(x++)+']');
		      return false;
		   });
[HTML] pobierz, plaintext 

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.

Ten post edytował krowal 10.02.2011, 10:41:25

[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 
var newRow = $('#elements .element:first').clone();
newRow.find('input[name="nazwa[0]"]').attr('id', 'noweId');
newRow.find('input[name="imie[0]"]').attr('id', 'noweId');
newRow.appendTo($('#elements'));
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował krowal 11.02.2011, 16:20:31

[niebieszki]

Super dziękuje bardzo za pomoc. Po kilku zmianach kod docelowy wygląda następująco:

[JAVASCRIPT] pobierz, plaintext 
var x = 0;
$('#add').click(function(){
		      var newRow = $('#elements .element:first').clone();
 
		      newRow.find('input[name="name[0]"]').attr('id', 'name['+x+']');
		      newRow.find('input[id="name['+x+']"]').attr('name', 'name['+(x)+']');
 
		      newRow.find('input').val('');
 
		      newRow.appendTo($('#elements'));
		      return false;
		   });
[JAVASCRIPT] pobierz, plaintext 

Nie wiem czy to jest poprawnie... ale działa jak należy Jeszcze raz dzięki Krowal za naprowadzenie na rozwiązanie.