Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
Reply to this topicStart new topic
> POST bez przeładowania strony
TwojPan
post 14.06.2014, 10:53:18
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Czesc,

Nie znam zupepnie JS czy AJAX. Szukam najprostszego rozwiazania tj. podczas wcisniecia SUBMIT aby strona sie nie przeladowywala tylko nie wiem jakis ruchomy gif lub napis 'dodawanie tresci' i na koncu info ze zostalo dodane. Nic wiecej. Czy ktos moglby mi pomoc z tym i ma gotowe rozwiazanie ? Tresc z formulara beda zapisywane w osobnym pliku .php

Formularz zawiera pola checkbox, radio, text, textarea. Nie potrzebuje zadnej walidacji oniewaz nie musi zostac nic wybrane - to tylko opcja.
Szukam w necie od rana ale tylko jakies bardzo skomplikowane rzeczy po 200 lini kodu i zbyteczne wlasnie walidacje etc..

szukam czego naprawde prostego.

Ten post edytował TwojPan 14.06.2014, 10:54:21
Go to the top of the page
+Quote Post
johny_s
post 14.06.2014, 11:04:39
Post #2





Grupa: Zarejestrowani
Postów: 594
Pomógł: 122
Dołączył: 17.07.2005
Skąd: P-na

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


http://malsup.com/jquery/form/
Go to the top of the page
+Quote Post
rad11
post 14.06.2014, 11:19:13
Post #3





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


  1. $(document).ready(function() {
  2.  
  3. $('#submit').click(function() {
  4. $.ajax({
  5. type: "POST",
  6. url: "sciezka do pliku",
  7. data: $("#form").serialize(),
  8. beforeSend: function() {
  9. $('.loader').html('<img src="sciezka do gifu" />').show();
  10. },
  11. dataType: "html",
  12. success: function(result) {
  13. $("#error_message").html(result);
  14. $('.loader').html('<img src="sciezka do gifu" />').hide();
  15.  
  16. },
  17. error: function(xhr, ajaxOptions, thrownError) {
  18. alert(xhr.status);
  19. alert(thrownError);
  20. alert(ajaxOptions);
  21. $('.loader').html('<img src="sciezka do gifu" />').hide();
  22. }
  23. });
  24. return false;
  25.  
  26.  
  27. });
  28.  
  29. });


Ten post edytował rad11 14.06.2014, 11:23:43
Go to the top of the page
+Quote Post
TwojPan
post 14.06.2014, 11:27:12
Post #4





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(johny_s @ 14.06.2014, 11:04:39 ) *

Dziekuje , sprawdze.

Cytat(rad11 @ 14.06.2014, 11:19:13 ) *
  1. $(document).ready(function() {
  2.  
  3. $('#submit').click(function() {
  4. $.ajax({
  5. type: "POST",
  6. url: "sciezka do pliku",
  7. data: $("#form").serialize(),
  8. beforeSend: function() {
  9. $('.loader').html('<img src="sciezka do gifu" />').show();
  10. },
  11. dataType: "html",
  12. success: function(result) {
  13. $("#error_message").html(result);
  14. $('.loader').html('<img src="sciezka do gifu" />').hide();
  15.  
  16. },
  17. error: function(xhr, ajaxOptions, thrownError) {
  18. alert(xhr.status);
  19. alert(thrownError);
  20. alert(ajaxOptions);
  21. $('.loader').html('<img src="sciezka do gifu" />').hide();
  22. }
  23. });
  24. return false;
  25.  
  26.  
  27. });
  28.  
  29. });

czy #submit to name=submit w <input type=submit> questionmark.gif? cy submit jako pole submit??
Go to the top of the page
+Quote Post
Turson
post 14.06.2014, 11:31:24
Post #5





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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


submit to id elementu
Go to the top of the page
+Quote Post
rad11
post 14.06.2014, 11:42:58
Post #6





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


Tak jak Turson napisał.
Go to the top of the page
+Quote Post
TwojPan
post 14.06.2014, 16:48:12
Post #7





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(rad11 @ 14.06.2014, 11:42:58 ) *
Tak jak Turson napisał.

mozesz mi podac prykladowy formularz questionmark.gif
Go to the top of the page
+Quote Post
Turson
post 14.06.2014, 16:49:48
Post #8





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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


Formularz powinieneś wiedzieć jaki zrobić, a submit to
  1. <input type="submit" id="submit">


Ten post edytował Turson 14.06.2014, 16:50:15
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 06:21:46
Post #9





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(Turson @ 14.06.2014, 16:49:48 ) *
Formularz powinieneś wiedzieć jaki zrobić, a submit to
  1. <input type="submit" id="submit">

Dzieki bardzo. Jeszcze nie mialem czasu tego sprawdzic ale zrobie to dzisiaj i dam znac. Jeszcze raz bardzo dziekuje.

Jeszcze mam pytanie male. Moze wydac sie glupie ale czy to "html" w tresci moze byc skoro bede mial pliki *.php ?

Ten post edytował TwojPan 16.06.2014, 06:46:42
Go to the top of the page
+Quote Post
rad11
post 16.06.2014, 07:06:18
Post #10





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie haha.gif

Ten post edytował rad11 16.06.2014, 07:08:01
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 07:24:15
Post #11





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(rad11 @ 16.06.2014, 07:06:18 ) *
To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie haha.gif

Sory nie zauwazylem. Zaraz Ci dam tego plusa biggrin.gif

Niestety cos nie dziala:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  2. <script type="text/javascript" src="ajax.js"></script>
  3. <form ACTION="save.php" method=post>
  4. <input TYPE="text" name="ble">
  5. <input TYPE="submit" id="submit" value=poslij>
  6. </FORM>


plik.js

  1. $(document).ready(function() {
  2.  
  3.  
  4.  
  5. $('#submit').click(function() {
  6.  
  7. $.ajax({
  8.  
  9. type: "POST",
  10.  
  11. url: "save.php",
  12.  
  13. data: $("#form").serialize(),
  14.  
  15. beforeSend: function() {
  16.  
  17. $('.loader').html('<img src="loader.gif" />').show();
  18.  
  19. },
  20.  
  21. dataType: "html",
  22.  
  23. success: function(result) {
  24.  
  25. $("#error_message").html(result);
  26.  
  27. $('.loader').html('<img src="loader.gif" />').hide();
  28.  
  29.  
  30.  
  31. },
  32.  
  33. error: function(xhr, ajaxOptions, thrownError) {
  34.  
  35. alert(xhr.status);
  36.  
  37. alert(thrownError);
  38.  
  39. alert(ajaxOptions);
  40.  
  41. $('.loader').html('<img src="sciezka do gifu" />').hide();
  42.  
  43. }
  44.  
  45. });
  46.  
  47. return false;
  48.  
  49.  
  50.  
  51.  
  52.  
  53. });
  54.  
  55.  
  56.  
  57. });


pik: save.php

  1. <?
  2. $foo = fopen($_POST['ble'], 'w');
  3. ?>


Nic sie nie wykonuje.

Ten post edytował TwojPan 16.06.2014, 07:42:07
Go to the top of the page
+Quote Post
Turson
post 16.06.2014, 07:27:09
Post #12





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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


Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 07:31:19
Post #13





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(Turson @ 16.06.2014, 07:27:09 ) *
Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

Nie otwieram lecz probuje ustawic. 'w' ustawia plik. Nie ma znaczenia czy cos zapisze do srodka czy nie i czy to wyswietle. Powinien pik sie ustawic o nazwie z pola input.



Ten post edytował TwojPan 16.06.2014, 07:32:00
Go to the top of the page
+Quote Post
rad11
post 16.06.2014, 09:26:56
Post #14





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<img src="ajax-loader.gif" />').show();
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28.  
  29. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>


  1. <form action="" method="post" id="form">
  2. <input type="text" name="input">
  3. <input type="submit" value="poslij" id="submit" >
  4. </form>
  5.  
  6. <div class="loader"></div>


Ten post edytował rad11 16.06.2014, 09:32:04
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 10:56:42
Post #15





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(rad11 @ 16.06.2014, 09:26:56 ) *
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<img src="ajax-loader.gif" />').show();
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28.  
  29. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>


  1. <form action="" method="post" id="form">
  2. <input type="text" name="input">
  3. <input type="submit" value="poslij" id="submit" >
  4. </form>
  5.  
  6. <div class="loader"></div>

Ok, teraz dziala smile.gif dane z formularza przekazywane sa do pliku save.php.
Mialbym jeszcze jedna prosbe jesli chodzi o ten przyklad jesli mozna.
Czy bylbys w stanie dorobic jeszcze jedna rzecz?questionmark.gif mianowicie jakies info / cos jak ten div class=loader / ze po wykonaniu wyswietla sie info ze dane zostaly przeslane.
Ja z tym sobie nie poradze.
Go to the top of the page
+Quote Post
Turson
post 16.06.2014, 11:16:22
Post #16





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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


Kod
success: function(result){
alert('ok');
}
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 11:22:28
Post #17





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Cytat(Turson @ 16.06.2014, 11:16:22 ) *
Kod
success: function(result){
alert('ok');
}
Fajnie, tylko gdzie to wsadzic biggrin.gif

Czy takie rozwiazanie jest poprawne ? / drugalinijka tylko dodana /

  1.  
  2. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  3.  
  4.  
  5. alert('AJAX request made!');


Go to the top of the page
+Quote Post
Turson
post 16.06.2014, 11:26:08
Post #18





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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


[JAVASCRIPT] pobierz, plaintext
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28. alert('jakis tekst');
  29. $('div.loader').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
rad11
post 16.06.2014, 12:32:08
Post #19





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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


mogles stworzyc poprostu pod formularzem:

  1. <div id='error_message'></div>


i np w skrypcie php zrobic prosty warunek ze jezeli foo sie wykona to dac echo ze sie udalo.

Po to miedzy innymi jest linijka

  1. $("#error_message").html(result);


Ten post edytował rad11 16.06.2014, 12:33:02
Go to the top of the page
+Quote Post
TwojPan
post 16.06.2014, 15:17:46
Post #20





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 13.08.2013

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


Panowie slicznie dziekuje choc ten drugi przyklad nie za bardzo dziala. Tzn dzialac dziala ale nie wyswietla sie ten loader /ten caly ostatni przyklad/ Mniejsza z tym. Panowie, jak zrobic <div> ktory zaladuje sie z linkiem 'zamknij' zamiast alert ?

Cos w stylu:

  1. $('.loader').html('<div style="width:200px; height:200px; top:50%; left: 50%; background-color: grey; opacity: 0.8"><div style="vertical-align: middle; text-align: center"><img src="ajax-loader.gif" /></div></div>').show();


Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 7.07.2025 - 13:27