(jquery) podliczanie zawartości input po zwolnieniu klawisza Opcje

[niebieszki]

Witam chciałbym napisać funkcję jquery ktora będzie wyliczac iloczyn 2 pól i wpisywała je do inputa wynik zaraz po wpisaniu 2 wartosci.

Poniżej przedstawiam obrazy i kod źródłowy:
(IMG:http://images38.fotosik.pl/615/053211c552122b7amed.png)

[HTML] pobierz, plaintext 
<table>
	<thead>
		<tr>
			<td>Liczba 1</td>
			<td>Liczba 2</td>
			<td>Wynik</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input name="liczba1[0]" id="liczba1[0]"></td>
			<td><input name="liczba2[0]" id="liczba2[0]"></td>
			<td><input name="wynik[0]" id="wynik[0]" disabled="disabled"></td>
		</tr>
		<tr>
			<td><input name="liczba1[1]" id="liczba1[1]"></td>
			<td><input name="liczba2[1]" id="liczba2[1]"></td>
			<td><input name="wynik[1]" id="wynik[1]" disabled="disabled"></td>
		</tr>
		.
		.
		.
		<tr>
			<td><input name="liczba1[n]" id="liczba1[n]"></td>
			<td><input name="liczba2[n]" id="liczba2[n]"></td>
			<td><input name="wynik[n]" id="wynik[n]" disabled="disabled"></td>
		</tr>
	</tbody>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("input[name='liczba2[0]']").keyup(
			function()
			{
				var wynik = $("input[name='liczba1[0]']").val()*$("input[name='liczba2[0]']").val();
				$("input[name='wynik[0]']").val(wynik);
 
			});
});
[JAVASCRIPT] pobierz, plaintext 

powyższy kod działa dla pierwszego pola (co nie jest rzeczą dziwną)
liczba wierszy tabeli jest nieokreślona, co trzeba zastosować aby ta funkcja była bardziej uniwersalna? próbowałem z pętla for lecz niestety nie wyszło mi.
Czy zna ktoś jakieś rozwiązanie takiego problemu?

[ziolo.92]

Proponuję Ci podpiąć zdarzenie pod oba inputy poprzez:

[JAVASCRIPT] pobierz, plaintext 
$('input[disabled!=disabled]')
[JAVASCRIPT] pobierz, plaintext 

Samo zliczenie wartości to odniesienie się do wiersza poprzez .parent().parent() i znalezienie inputów które tak jak powyżej nie są wyłączone.

Ten post edytował ziolo.92 13.02.2011, 00:26:04

[niebieszki]

Niestety albo ja nic z tego nie rozumiem albo z twojej wypowiedzi nic nie wynika.
Mi nie chodziło o to aby się dowiedzieć jak podpiąć zdarzenie pod pola tylko o to jak dokonać stosownych obliczeń dla każdego wiersza ( nie dla wszystkich jednocześnie tylko po zwolnieniu klawisza z pola liczba2 w każdym wierszu z osobna). Docelowy kod będzie posiadał wiele pól wynikowych jak i nie tylko pola input do obliczeń.
Mi chodzi o metodę iteracji. Kod powinien być udynamiczniony poprzez zmienne:

[JAVASCRIPT] pobierz, plaintext 
var i=0;
$(document).ready(function() {
	$("input[name='liczba2['+(i)+']']").keyup(
			function()
			{
				var wynik = $("input[name='liczba1['+(i)+']']").val()*$("input[name='liczba2['+(i)+']']").val();
				$("input[name='wynik['+(i)+']']").val(wynik);
			});
});
[JAVASCRIPT] pobierz, plaintext 

Tylko w za pomocą jakiej pętli (jeśli w ogóle pętla wchodzi w grę) powinienem zmienna i inkrementować aby dla 'nieznanej' liczby wierszy móc stosować obliczenia

[ziolo.92]

Miałem na myśli takie rozwiązanie:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("table input:not(:disabled)")
		.val(0)
		.bind('keyup', function(){
					var wynik = 1;
					var tr = $(this).parent().parent();
					tr.find('input:not(:disabled)')
						.each(function(){
							wynik*=$(this).val();
						});
					tr.find('input:disabled').val(wynik);
		});
});
[JAVASCRIPT] pobierz, plaintext 

Dzięki temu masz kod uniezależniony od ilości kolumn i ich kolejności.

Lub jeśli chcesz korzystać z pętli co w przypadku jquery będzie znacznie szybsze z powodu odnoszenia się bezpośrednio po id można zrobić tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	var i=0;
	while(i <= $('table tr').length-2){
		$('#liczba1_'+i+', #liczba2_'+i)
			.val(0)
			.keyup(function(){
 
				var id = $(this).attr('id');
				id = id.substr(id.indexOf('_')+1, id.length-id.indexOf('_')-1);
 
				var wynik = $('#liczba1_'+id+'').val()*$('#liczba2_'+id).val();
				$('#wynik_'+id).val(wynik);
 
			});
		i++;
	}
});
[JAVASCRIPT] pobierz, plaintext 

Tyle, że to rozwiązanie ma jeden mankament, mianowicie nie można w id używać znaków '[', ']', dlatego zastąpiłem je jednym znakiem '_' przed liczbą.

Pozdrawiam

Ten post edytował ziolo.92 13.02.2011, 12:35:26

[niebieszki]

Dzięki za wyjaśnienia.

Pierwsze rozwiązanie bardzo ukierunkowany tylko na ten typ tabeli (chciałbym do obliczeń korzystając także z pól select i nie mam pojęcia jak zmienić ten kod aby obsługiwał bardziej skomplikowane obliczenia z włączeniem selectów)

Drugie rozwiązanie jest bardzo fajne takie o jakie mi chodziło łatwo rozwijalne podpinane do rożnych zdażeń np change selecta... tylko własnie mankament o którym wspomniałeś. Niestety potrzebuje aby t były zmienne tablicowe aby móc w kontrolerze polecieć na nich foreach-em i do bazy. Nie ma żadnej możliwości aby umieścić w tym drugim rozwiązaniu te klamry? Jeśli możesz to powiedz dlaczego to jest nie możliwe.

[ziolo.92]

Możesz używać notacji tablicowej w taki sposób:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	var i=0;
	while(i <= $('table tr').length-2){
		$('#liczba1\\['+i+'\\], #liczba2\\['+i+'\\]')
			.val(0)
			.bind('change', function(){		
				var id = $(this).attr('id');
				id = id.substr(id.indexOf('[')+1, id.length-2-id.indexOf('['));
				var wynik = $('#liczba1\\['+id+'\\]').val()*$('#liczba2\\['+id+'\\]').val();
				$('#wynik\\['+id+'\\]').val(wynik);
 
			});
		i++;
	}
});
[JAVASCRIPT] pobierz, plaintext 

Ale jest to rozwiązanie mało elastyczne. Nadal proponuję Ci skorzystać z poniższego rozwiązania, które mimo że jest wolniejsze to są to takie wartości milisekund, że nie odczujesz różnicy, a dzięki zastosowaniu ":input" odnosi się również do pola select.

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("table :input:not(:disabled)")
		.val(0)
		.bind('change', function(){
					var wynik = 1;
					var tr = $(this).parent().parent();
					tr.find(':input:not(:disabled)')
						.each(function(){
							wynik*=$(this).val();
						});
					tr.find('input:disabled').val(wynik);
		});
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował ziolo.92 13.02.2011, 18:23:03

[niebieszki]

Dobrze wiec przystaje za twoją radą i wybieram opcje drugą.

Podpowiedz mi tylko jeszcze jak do tego kodu wprowadzić a dokładniej jak rozróżnić pola aby móc
np. dodać pole pierwsze z wartością pola trzeciego selecta( stworzonego) i podzielić przez (pole drugie + pole pierwsze) = całość ląduje oczywiście w polu wynik.

To jest przykład nie musi być konkretnie to chodzi mi ogólnie o zasadę.

Starałem się przerobić ten kod samodzielnie lecz niestety nie dałem rady.

Pozdrawiam

[ziolo.92]

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("table :input:not(:disabled)")
		.val(0)
		.bind('change', function(){
					var wynik = 1,
						tr = $(this).parent().parent(),
						liczby = [];
					tr.find(':input:not(:disabled)')
						.each(function(){
							liczby[] = $(this).val();
						});
					//tutaj przeprowadzasz działania na elementach tablicy liczby które są wartościami kolejnych pól formularza w wierszu
					tr.find('input:disabled').val(wynik);
		});
});
[JAVASCRIPT] pobierz, plaintext