Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][JavaScript][PHP] ? Dynamiczny formularz, Czego szukać ?
Posio
post 30.08.2011, 14:54:42
Post #1





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

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

Ten post edytował Posio 30.08.2011, 15:08:20
Go to the top of the page
+Quote Post
sada
post 30.08.2011, 15:50:56
Post #2





Grupa: Zarejestrowani
Postów: 302
Pomógł: 24
Dołączył: 6.12.2008

Ostrzeżenie: (0%)
-----

Ż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.
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 15:58:46
Post #3





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

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

Ten post edytował Posio 30.08.2011, 15:59:25
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 16:39:20
Post #4





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
-----

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

Ten post edytował drozdii07 30.08.2011, 16:49:13


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 16:44:01
Post #5





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

a mogl bys mi wytłumaczyc na jakiej zasadzie to działa? żbym troche nauczył się tego JS
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 16:48:29
Post #6





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
----- 

[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


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 16:54:25
Post #7





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

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 ?
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 16:57:29
Post #8





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
-----

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


Ten post edytował drozdii07 30.08.2011, 16:58:09


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 17:09:38
Post #9





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

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 ;/

Ten post edytował Posio 30.08.2011, 17:10:53
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 17:12:22
Post #10





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
-----

No tak zapomniałem zamknąć AJAX'a biggrin.gif dopisz po klamrze konczącej success takie cos: })


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 17:17:40
Post #11





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

doszedłem do tego błędu,
kompletnie nie wiem jak wyświetlić wynik ....

Ten post edytował Posio 30.08.2011, 17:56:25
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 18:18:44
Post #12





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
-----

No jak nie wiesz ? Ale w PHP czy jak ?


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 18:30:25
Post #13





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

no żeby mi się w tym formularzu wyświetliło...
Go to the top of the page
+Quote Post
drozdii07
post 30.08.2011, 18:32:29
Post #14





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. $("#IDFormularza").attr("value", msg);
[HTML] pobierz, plaintext


Daj to w success: w AJAX'ie


--------------------
Wspieram akcję "jQuery i AJAX to nie język programowania"
Go to the top of the page
+Quote Post
Posio
post 30.08.2011, 18:42:50
Post #15





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
przemo191
post 30.08.2011, 20:46:23
Post #16





Grupa: Zarejestrowani
Postów: 154
Pomógł: 3
Dołączył: 1.08.2011

Ostrzeżenie: (0%)
-----

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

Ten post edytował przemo191 30.08.2011, 20:47:43
Go to the top of the page
+Quote Post
markonix
post 31.08.2011, 08:08:23
Post #17





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----

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.


--------------------
eBizo.pl || Generator losowych haseł || Doładowania telefonów (VAT 23%), w tym płatność BITcoin || Zwiększ liczbę wejść na Twoją stronę
Go to the top of the page
+Quote Post
piotrek_ma_probl...
post 31.08.2011, 10:01:26
Post #18





Grupa: Zarejestrowani
Postów: 47
Pomógł: 2
Dołączył: 6.02.2007
Skąd: Kotlina Kłodazka

Ostrzeżenie: (0%)
----- 

[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 ;]
Powód edycji: [phpion]: Poprawiłem bbcode
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 15:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn