Forum PHP.pl > [AJAX][JavaScript]Proste obliczenia w formularzu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][JavaScript]Proste obliczenia w formularzu

lordmonkey

24.04.2010, 00:01:20

witam,
dzisiaj mam coś takiego

[HTML] pobierz, plaintext 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
	<script type="text/javascript">
	function pro(wellf,skillf){
		var wellness = 1 + 2 * (wellf / 100);
		var productiv = 0.25 * skillf * 2 * wellness * 2 * 1.5;
		document.getElementById('prod').innerHTML = productiv;
		}
	</script>
	</head>
 
	<body>	  
		<form action="" method="POST">
			<table >
				<tr> 
					<td>
					Wellness	</td>
					<td width=65>
						<input type="text" name="well" size="5"/>
					</td>
					<td >
					Skill	</td>
					<td width=65>
						<input type="text" name="skill" size="5"/>
					</td>
					<td>
					Productivity</td>
					<td >
						<input type="text" name="prod" size="5" />
					</td>
					<input type="button" value="Calculate" onclick="pro(skill, well)"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>
[HTML] pobierz, plaintext

jak należy to zrobić, aby po naciśnięciu przycisku Calculate w "<input type="text" name="prod" size="5" />"pojawil sie wynik z funkcji?

thek

24.04.2010, 12:14:01

Może zamiast innerHTML użyj value?

lordmonkey

24.04.2010, 13:41:33

ja narazie się dopiero uczę także jeżeli mógłbyś pokazać trochę kodu jak to zrobić to byłbym wdzięczny, a tak poza tym to będzie to działać bez przeładowania strony?(tak jak normalnie w AJAX'ie ?)

thek

24.04.2010, 14:28:19

Zamień w funkcji innerHTML na value, czyli z:
document.getElementById('prod').innerHTML = productiv;
na
document.getElementById('prod').value = productiv;
I powinno zadziałać, bo od tego jest JS by działało po stronie klienta.

lordmonkey

24.04.2010, 14:32:05

zrobiłem jak napisałeś, ale teraz w okienku z id="prod" wpisuje się NaN, więc musi gdzieś być błąd w funkcji, a nie mam pojęcia gdzie tam mogłem popełnić błąd. :/

EDIT:
dobra doszedłem do tego ale zmieniłem z

Kod

    function pro(wellf,skillf){
        var wellness = 1 + 2 * (wellf / 100);
        var productiv = 0.25 * skillf * 2 * wellness * 2 * 1.5;
        document.getElementById('prod').innerHTML = productiv;
        }

Kod

    function pro(){
        var wellness = 1 + 2 * ( document.getElementById('well').value / 100);
        var productiv = 0.25 *  document.getElementById('skill').value * 2 * wellness * 2 * 1.5;
        document.getElementById('prod').value = productiv;
        }

czy dałoby się zrobić tak jak myślałem na początku zeby przekazywać wartości z formularz jako argumenty zamiast czegoś takiego?

thek

24.04.2010, 20:48:46

Da się to zrobić na przynajmniej 2 sposoby. Albo zmieniasz wywołanie funkcji, albo funkcję. To co zrobiłeś to 2 wariant. Wariant pierwszy to zamiana:

[HTML] pobierz, plaintext 
<input type="button" value="Calculate" onclick="pro(skill, well)"/></td>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<input type="button" value="Calculate" onclick="pro(document.getElementById('skill').value, document.getElementById('well').value )"/></td>
[HTML] pobierz, plaintext

W tym przypadku podanym przeze mnie jawnie przekazujesz wartości, więc skrypt zna je i może przetwarzać. Możesz jeszcze ciut inaczej zrobić jako minimalny mix obu wariantów. Przekazujesz jako parametry same document.getElementbyId('tutaj_id') a w funkcji posługujesz się wywołaniem wellf.value choćby. To więc kwestia wygody tak naprawdę.

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.