Skrypt podliczania na stronie

witam,

Na wstępie powiem że nie jestem jakimś webmasterem, piszę coś na swój własny użytek co przyda mi się w pracy na co dzień.

Potrzebuje zrobić taki jakby kalkulator, podliczenie na stronie, ciężko to mi nazwać :) to taka strona jakby z zamówieniami.

Mam bazę danych gdzie mam produkty (czasami będę dodawał, usuwał, nigdy nic na stałe) pobieram listę produktów do tabeli razem z ceną i po prawej wpisuje ilość jaka mnie interesuje i daje na prawo w strzałkę "-->" aby to przeliczyło. Wszystko się układa jeżeli jest jeden produkt, gdy jest więcej uzupełnia się wszędzie to co wpisałem w pierwszym polu. Cały czas myślę jak to rozwiązać, jak nadać rozdzielić formularze.

Oto rysunek jak docelowo chciałbym aby wyglądało:

oto kod jaki udało mi się wyskrobać, wiem wiem... biedy ten mój kod ale tak jak pisałem wyżej to dla swojego użytku, nie jestem webmasterem a chcę sobie ułatwić pracę w codziennym dniu. Pomoże ktoś? Naprowadzi albo przekieruje gdzieś gdzie znajdę jakiś przykład?

Chyba że można to jakoś inaczej rozwiązać?

<?php
$liczba = $_POST['liczba'];
$produkty = mysql_query("SELECT * FROM produkty") or die('Błąd w pobieraniu listy produktów');
if(mysql_num_rows($produkty) > 0) 
	{
		echo ("<table id='sum_table' cellpadding='10' border='1'>");
		echo ("<tr>");
		echo ("<td width='300'>Możliwe produkty do wyboru</td>");
		echo ("<td width='80'>Cena szt.</td>");
		echo ("<td width='130'>Ilość</td>");
		echo ("<td>Razem</td>");
		echo ("<td> </td>");
		echo ("</tr>");
    	while($p = mysql_fetch_array($produkty))
    		{
    			if(mysql_num_rows($produkty) > 0) 
    				{
    					echo ("<form method='post' action='index.php'>");
    					echo ("<tr>");
						echo ("<td>".$p[nazwa]."</td>");
						echo ("<td>".$p[cena]." PLN</td>");						
						echo ("<td><input type='text' name='liczba' value='".$_POST['liczba']."'></td>");
						echo ("<td><input type='submit' value='-->'></td>");
						echo ("<td align='right' >");
						echo $p[cena] * $liczba;								
						echo (" PLN</td>");
						echo ("</tr>");
						echo ("</form>");
					}
				    	
    		}
    	echo ("</table>");

	}
?>

To raczej nie jest zadanie dla PHP, bo PHP działa po stronie serwera. A z tego, co zrozumiałem, to ma się coś przeliczać/wyświetlać w przeglądarce w reakcji na działania użytkownika. W związku z tym to wszystko powinno się dziać po stronie komputera użytkownika, a nie serwera - więc nie PHP, ale JavaScript.

Zgodzę się z @cerrato, lepiej zrobić to w JS.
Aczkolwiek w PHP też da się ugryźć. Po lekkiej modyfikacji twojego kodu.
Co prawda nie testowałem, ale powinno działać.

<?php

$liczby = $_POST['liczba'];
$produkty = mysql_query("SELECT * FROM produkty") or die('Błąd w pobieraniu listy produktów');

if (mysql_num_rows($produkty) > 0) {
    echo("<table id='sum_table' cellpadding='10' border='1'>");
    echo("<tr>");
    echo("<td width='300'>Możliwe produkty do wyboru</td>");
    echo("<td width='80'>Cena szt.</td>");
    echo("<td width='130'>Ilość</td>");
    echo("<td>Razem</td>");
    echo("<td> </td>");
    echo("</tr>");
    $suma = 0;

    foreach (mysql_fetch_array($produkty) as $key => $p) {
        $suma = $p['cena'] * $liczby[$key];
        echo("<form method='post' action='index.php'>");
        echo("<tr>");
        echo("<td>" . $p['nazwa'] . "</td>");
        echo("<td>" . $p['cena'] . " PLN</td>");
        echo("<td><input type='text' name='liczba[]' value='" . $_POST['liczba'] . "'></td>");
        echo("<td><input type='submit' value='-->'></td>");
        echo("<td align='right' >");
        echo $p[cena] * $liczby[$key];
        echo(" PLN</td>");
        echo("</tr>");
        echo("</form>");
    }
    echo '<tr><td>'. $suma .'</td></tr>';
    echo("</table>");

}

Dziękuje za odpowiedzi.

Coś tam nastukałem w js ale nie umiem tego jeszcze rozdzielić dalej...

kod w HEAD

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
	{

 		$('#liczba2').keyup(function(event)
 			{
	  					licz();
 			});

 		function licz()
 			{
   			var liczba_1 = $("#liczba1").val();
   			var liczba_2 = $("#liczba2").val();
   			var suma =  (liczba_1 *  liczba_2).toFixed(2);
   			$("#wynik").val(suma);
 
 			}
	});
 </script>

Kod na stronie

$produkty = mysql_query("SELECT * FROM produkty") or die('Błąd w pobieraniu listy produktów');
if(mysql_num_rows($produkty) > 0) 
    {
        echo ("<table id='sum_table' cellpadding='10' border='1'>");
        echo ("<tr>");
        echo ("<td width='300'>Możliwe produkty do wyboru</td>");
        echo ("<td width='80'>Cena szt.</td>");
        echo ("<td width='130'>Ilość</td>");
        echo ("<td>Razem</td>");
        echo ("</tr>");
        while($p = mysql_fetch_array($produkty))
            {
                if(mysql_num_rows($produkty) > 0) 
                    {
                        echo ("<form method='post' action='index.php'>");
                        echo ("<tr>");
                        echo ("<td>".$p[nazwa]."</td>");
                        echo ("<td><input id='liczba1' type='hidden' value='".$p[cena]."'>".$p[cena]." PLN</td>");                     
                        echo ("<td><input id='liczba2' type='text' value='".$_POST['liczba2']."' autocomplete='off'/></td>");
                        echo ("<td align='right'><input id='wynik' type='text' value='0,00' disabled> PLN</td>");
                        echo ("</tr>");
                        echo ("</form>");
                    }

            }
        echo ("</table>");

    }

fajnie bo po wpisaniu dowolnej liczby od razu przelicza w następnym okienku, o wiele lepsze niż pierwotnie robiłem to w PHP, lecz kolejny wiersz już nie działa w ogóle. Jak to rozdzielić? Pomoże ktoś? Robię co umiem ale to nadal dla mnie czarna magia :)

Dziękuje z góry wszystkim za pomoc.

id powinno być unikalne dla każdego elemenu.
U Ciebie w każdym obiegu pętli, w każdym formularzu masz takie same wartości dla atrybutu id i dlatego jQuery łapie Ci tylko ten pierwszy.

Sprawdź to:
Zrezygnowałem z id na rzecz class i zmieniłem skrypt jQuery
https://jsfiddle.net/8fgshz7L/

NewUser2k13 napisał(a):

id powinno być unikalne dla każdego elemenu.
U Ciebie w każdym obiegu pętli, w każdym formularzu masz takie same wartości dla atrybutu id i dlatego jQuery łapie Ci tylko ten pierwszy.

Sprawdź to:
Zrezygnowałem z id na rzecz class i zmieniłem skrypt jQuery
https://jsfiddle.net/8fgshz7L/

To jest właśnie to o co mi chodziło :) dziękuje ślicznie :)

męczę się jeszcze z jednym problemem od tygodnia... chciałbym aby wynik w polu RAZEM był zaokrąglony do 2 cyfr po przecinku, gdzieś w internecie wyczytałem aby wykorzystać .toFixed(2) lecz jak próbuje gdzieś to dodać to już skrypt nie działa. Problem się pojawia gdy mam np cenę 5.30 i mnożę x3 to wywala wynik 15.899999999999999 nie wiedzieć dlaczego.

kompletnie też nie wiem jak zrobić sumowanie tego wszystkiego razem już pod tabelą. Pomoże ktoś? :)

https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary

Tutaj masz trochę informacji czemu tak się dzieje.
https://en.wikipedia.org/wiki/IEEE_754