Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript][PHP] ? Dynamiczny formularz
Forum PHP.pl > Forum > Przedszkole
Posio
30.08.2011, 14:54:42
Witam. Mam do stworzenia formularz. Tyle że nie ma to być zwykły HTML'owski formularz, tylko formularz aktywny.

Chodzi mi o to, że gdy mam 2 pola. Przyładowo #1-Ilość paczek na palecie, #2-Ilość palet gdzie #1=2 i #2=4 w trzecim okienku (zablokowanym) wyskoczy mi całkowita ilość paczek czyli 2*4=8, wszystko miało by się dziać bez odświeżania strony. Wiem że jest to powiązane z AJAX'em ale nie znalazłem zadnego tutoriala, który by mi to dostatecznie wyjaśnił.

Dane z tego formularza oczywiście później mają zostać wysłane do innego pliku.

Jeśli ktoś był by wstanie mnie nakierować, z czego mam skorzystać, jakieś linki to był bym wdzięczny.


Pozdrawiam
sada
30.08.2011, 15:50:56
Żeby wyskakiwała aktualna suma bez odświeżania wystarczy JS, czy jQuery,a do wysłania to do innego skryptu też nie potrzebujesz Ajaxa chyba , że chcesz wysłać bez odświeżania.
Posio
30.08.2011, 15:58:46
chodzi o to, że właśnie nie wiem czego potrzebuje... Ogarniam juz PHP, HTML, CSS ale nic o JS czy Ajaxie nie wiem... I nigdzie nie moge znaleźć nic co by mi w tym pomogło. Twój post niewiele mi pomógł ;/
zależy mi na tym, żeby ta suma generowała się bez odświeżania....
drozdii07
30.08.2011, 16:39:20
Najprościej będzie wysłać dane przez AJAX zrobiony w jQuery smile.gif

[HTML] pobierz, plaintext 
  1.  
  2. pierwsze_pole = $("#pierwsze_pole").val();
  3. drugie pole = $("drugie_pole").val();
  4.  
  5.  
  6. $.ajax({
  7.  
  8.  
  9. type: 'POST',
  10. url: 'plik.php',
  11. data: {pierwsze_pole: pierwsze_pole, drugie_pole: drugie_pole}
  12.  
  13. success: function(msg){
  14. $("#wynikowydiv").html(msg);
  15. }
[HTML] pobierz, plaintext


Pisane z pamięci mogą być błędy. Podstaw sobie wszystkie potrzebne dane pod to smile.gif

W pliku PHP robisz dodawanie, czy co tam chcesz, i echujesz te dane.

A dane z AJAX'a odbierasz tak:

[PHP] pobierz, plaintext 
  1. $_POST['pierwsze_pole'] // I tak dalej..
[PHP] pobierz, plaintext


EDIT: Mała poprawka w kodzie..
Posio
30.08.2011, 16:44:01
a mogl bys mi wytłumaczyc na jakiej zasadzie to działa? żbym troche nauczył się tego JS
drozdii07
30.08.2011, 16:48:29 
[HTML] pobierz, plaintext 
  1.  
  2. pierwsze_pole = $("#pierwsze_pole").val();
  3. drugie pole = $("drugie_pole").val();
[HTML] pobierz, plaintext


Pobiera dane które są aktualnie wpisane do formularza..


$.ajax to wysyłanie danych do pliku podanego w url a reszta dzieje się w pliku PHP. Jeśli wszystko się uda czyli skrypt PHP zwroci odpowiedz to wykona się success: 

[HTML] pobierz, plaintext 
  1.  
  2. $("#wynikowydiv").html(msg)
  3.  
[HTML] pobierz, plaintext


Zmienia wartośc DIV'a wynikowydiv na to co wrócił skrypt PHP smile.gif
Posio
30.08.2011, 16:54:25
Ok czyli tak.
Do strony dodałem core JQUERY.

ten kod co mi dałeś wrzucic w jakieś <script></> ?

i w jaki sposób mam zwrócić ten wynik w moim pliku php ?
drozdii07
30.08.2011, 16:57:29
Polecam wrzucić JS w osobny plik wink.gif Mniejszy bałagan, tylko pozmieniaj sobie nazwy DIV'ow itp. a w PHP robisz tak:

[PHP] pobierz, plaintext 
  1.  
  2. $pierwsze = $_POST['pierwsze_pole'];
  3. $drugie = $_POST['drugie_pole'];
  4.  
  5. $wynik = ($pierwsze + $drugie);
  6.  
  7. echo $wynik;
  8.  
[PHP] pobierz, plaintext
Posio
30.08.2011, 17:09:38
Jednak coś chyba robie cały czas nie tak.

Pliki wyglądaja tak

index
[PHP] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title></title>
  4. <script src="js/jquery-1.6.2.js"></script>
  5. <script>
  6.  
  7. pierwsze_pole = $("#cena").val();
  8. drugie_pole = $("#vat").val();
  9.  
  10.  
  11. $.ajax({
  12.  
  13.  
  14. type: 'POST',
  15. url: 'plik.php',
  16. data: {cena: cena, vat: vat}
  17.  
  18. success: function(msg) {
  19. $("#wynik").html(msg); }
  20.  
  21.  
  22. </script>
  23.  
  24.  
  25.  
  26. </head>
  27. <body>
  28.  
  29.  
  30.  
  31. <form>
  32. <input type="number" name="cena" />
  33. <input type="number" name="vat" />
  34. <input type="number" name="wynik" value="<? echo $wynik; ?>" />
  35. </form>
  36. <body>
  37. </body>
  38. </html>
[PHP] pobierz, plaintext


edytor wywala mi syntax tutaj:
[PHP] pobierz, plaintext 
  1.  success: function(msg) {
[PHP] pobierz, plaintext


plik
[PHP] pobierz, plaintext 
  1. <?
  2. $cena = $_POST['cena'];
  3. $vat = $_POST['vat'];
  4.  
  5. $wynik = ($cena * $vat);
  6.  
  7. echo $wynik;
  8.  
  9.  
  10. ?>
[PHP] pobierz, plaintext



chyba coś robię źle ;/
drozdii07
30.08.2011, 17:12:22
No tak zapomniałem zamknąć AJAX'a biggrin.gif dopisz po klamrze konczącej success takie cos: })
Posio
30.08.2011, 17:17:40
doszedłem do tego błędu,
kompletnie nie wiem jak wyświetlić wynik ....
drozdii07
30.08.2011, 18:18:44
No jak nie wiesz ? Ale w PHP czy jak ?
Posio
30.08.2011, 18:30:25
no żeby mi się w tym formularzu wyświetliło...
drozdii07
30.08.2011, 18:32:29 
[HTML] pobierz, plaintext 
  1. $("#IDFormularza").attr("value", msg);
[HTML] pobierz, plaintext


Daj to w success: w AJAX'ie
Posio
30.08.2011, 18:42:50
zrobiłem tak:
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script src="js/jquery-1.6.2.js"></script>
  7. <script type="text/javascript">
  8.  
  9. pierwsze_pole = $("#cena").val();
  10. drugie_pole = $("#vat").val();
  11.  
  12.  
  13. $.ajax({
  14.  
  15.  
  16. type: 'POST',
  17. url: 'plik.php',
  18. data: {cena: cena, vat: vat},
  19.  
  20.  
  21. success: function(msg){
  22. 	$("#1").attr("value", msg);
  23. }  
  24.  
  25. });
  26.  
  27. </script>
  28.  
  29.  
  30. </head>
  31. <body>
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38. <form action="plik.php">
  39. <input type="number" name="cena" />
  40. <input type="number" name="vat" />
  41. <input type="number" name="wynik" id="1" />
  42.  
  43. <body>
  44. </body>
  45. </html>
[PHP] pobierz, plaintext


i nic mi nie wyświetla...
przemo191
30.08.2011, 20:46:23
1. Czemu masz kilka znaczników body?
2. Nie wiem czy to ma znaczenie, ale nie zamknąłeś <form>.

Co do samego skryptu, to jestem zielony w js i ajax. Więc Ci nie pomogę.
markonix
31.08.2011, 08:08:23
pierwsze_pole = $("#cena").val();
drugie_pole = $("#vat").val();

...

data: {cena: cena, vat: vat},

To nie ma prawa działać. Poza tym przyjmując, że nazwy zmiennych są prawidłowych to i tak te wartości nie pobierają danych bo #cena to element o ID cena, a takiego nie widzę. To jest analogia do CSS - pisałeś, że znasz więc to popraw odpowiednio i debuguj problem. No i ostatnia sprawa cały skrypt warto by podpiąć pod jakiś event bo teraz wykonuje się raz - przy załadowaniu strony.
piotrek_ma_problem
31.08.2011, 10:01:26 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>stronka</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript">
  7.  
  8.   function oblicz(){
  9. 			var a = document.nazwa_form.zm_a1.value;
  10. 			var b = document.nazwa_form.zm_a2.value;
  11. 			var d= Math.floor(a * B);
  12. 			document.nazwa_form.text_name1.value = d;
  13. 			return true;
  14.  
  15.   }
  16.  
  17.  
  18.  
  19. </script>
  20.  
  21.  
  22. <FORM METHOD=POST name="nazwa_form" autocomplete=off>
  23.  
  24.  
  25.  
  26. 			<input type="radio" name="lvalue" value="<?echo $lvalue_1;?>"> <input type="text" disabled="disabled" id="text_name1" name="text_name1"onkeydown="return isNumberKey(event);" Value="<?echo $lvalue_1;?>"><br><br>
  27. 			<INPUT TYPE="text" NAME="zm_a1" VALUE=""   id="txtChar"  onkeydown=" oblicz();" onkeyup="oblicz();"  onblur="check_zm_a();">	
  28.  
  29. 				<INPUT TYPE="text" NAME="zm_a2" VALUE=""   id="txtChar"  onkeydown=" oblicz();" onkeyup="oblicz();"  onblur="check_zm_a();"
  30.  
  31.  
  32.  
  33. </form>
  34. </body>
  35. </html>
[HTML] pobierz, plaintext

może coś takiego ci pomoże ;]
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.