Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: formularz zamówienia
Forum PHP.pl > Forum > XML, AJAX
d4ng
24.09.2012, 12:26:43
Witam, tworze własnie stronkę z bardzo prostym formularzem zamówień. Po uzupełnieniu pola "Ilość" i kliknięciu "Zamów" pojawia się poniżej kilka dodatkowych pól "Imie i nazwisko", "Email", "Telefon" itp... po uzupełnieniu można kliknąć "Wyślij zamówienie i wszystko (ilość, imie i nazwisko, email, tel itp) przesyła się na podany w kodzie email. A poniżej pokazuje się napis "Dziękujemy za złożenie zamówienia ktoś skontaktuje się z Państwem w ciągu 24h.
Sam formularz nie jest dla mnie problemem... tylko pokazanie się dodatkowych pól formularza po uzupełnieniu pola "Ilość" bez przeładowania strony... Jak to zrobić? Załączam zamysł narysowany w Paint'cie smile.gif
http://edytor-html.pl/s1.png
http://edytor-html.pl/s2.png
markonix
24.09.2012, 12:30:08
jQuery i wystarczą dwie funkcje: val() -> show() no i oczywiście event jaki sobie wybierzesz (zmiana wartości inputa, zmiana aktywnego inputa itp. można kilka na raz też).

Ps. Dział nieodpowiedni. To jeszcze nie ajax..
d4ng
24.09.2012, 13:01:23
Dziękuje za odpowiedź ale czy mógłbym prosić o przykład w kodzie bo z samego tekstu wiele się nie nauczę. Pozdrawiam
Arcioch
24.09.2012, 13:41:41
Taki bardzo prymitywny przykład ale szef jest w pracy wink.gif chodzi tylko o metodę wink.gif

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  5. <script>
  6. $(function() {
  7.  
  8. 	$("#pokazany").submit(function() {
  9. 		var ilosc = $('input[name=ilosc]').val();
  10.  
  11. 		if(ilosc  == ''){
  12. 			alert('Uzupełnij ilość produktów');
  13. 		}else{
  14. 			$('#uktyry').slideDown('slow');
  15. 		}
  16.  
  17. 		return false;
  18. 	});
  19.  
  20. });
  21. </script>
  22. </head>
  23. <body>
  24.  
  25. 	<form method="Post" id="pokazany" action="">
  26. 		Ilość: <input type="text" name="ilosc" />
  27. 		<input type="submit" name="show" value="Zamawiam" />
  28. 	</form>
  29.  
  30. 	<form method="Post" action="" id="uktyry" style="display: none; clear: both; overflow:hidden;">
  31. 		Imie i nazwisko: <input type="text" name="imie" />
  32. 		Email: <input type="text" name="email" />
  33. 		Imie i nazwisko: <input type="text" name="imie" />
  34. 		<input type="submit" name="send" value="Wyślij zamówienie" />
  35. 	</form>	
  36. </body>
  37. </html>
[HTML] pobierz, plaintext
d4ng
24.09.2012, 19:32:35
Wielkie dzięki, myślę że to co zrobiłeś przysłuży się nie tylko mi, ale i "potomnym". Prosiłbym jeszcze o małą poprawkę poniższego kodu, bo po wejściu na strone kod wykonuje się z automatu a jeszcze nieuzupełnione pola lecą na email... Ps. Czy można zrobić tak że komunikat o wysłaniu wiadomości pokazuje się po naciśnięciu przycisku "wyślij zamówienie" bez przeładowania strony? Dziękuje i pozdrawiam

Kod
<?php
        $ilosc = $_POST['ilosc'];
        $imie = $_POST['imie'];
        $email = $_POST['email'];
        $telefon = $_POST['telefon'];
        $adresdo = 'mojemail@firma.pl';
        $temat = "Zamówienie";
        $zawartosc = "Nowe zamówienie na xyz w ilośći $ilosc sztuk od $imie \n\n Dane kontaktowe: \n Email - $email \n Telefon: $telefon";
        if (mail($adresdo, $temat, $zawartosc)) {
            echo "Dziekujemy za złożenie zamówienia. W ciągu 24 skontaktujemy się z Państwem w celu potwierdzenia oraz realizacji zamówienia.";
            } else {
                echo "Zamówienie nie zostało wysłane";
                }
        ?>
        
        <form action="" method="Post" id="pokazany">
        Ilość: <input type="text" name="ilosc" />
        <input type="submit" name="show" value="Zamawiam" />
        </form>

        <form method="Post" action="" id="uktyry" style="display: none; clear: both; overflow:hidden;">
        Imie i nazwisko: <input type="text" name="imie" /><br />
        Email: <input type="text" name="email" /><br />
        Telefon: <input type="text" name="telefon" /><br />
        <input type="submit" name="send" value="Wyślij zamówienie" />
        </form>

Arcioch
26.09.2012, 18:24:38
To jest tylko przykład trzeba go dopracować i zabezpieczyc wink.gif

plik index.php

[HTML] pobierz, plaintext 
  1.  
  2.  
  3. 	<html>
  4.     <head>
  5.     <meta charset="UTF-8">
  6.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  7.     <script>
  8.     $(function() {
  9.  
  10.     $("#pokazany").submit(function() {
  11.     var ilosc = $('input[name=ilosc]').val();
  12.  
  13.     if(ilosc == ''){
  14.     alert('Uzupełnij ilość produktów');
  15.     }else{
  16.     $('#uktyry').slideDown('slow');
  17.     }
  18.  
  19.     return false;
  20.     });
  21.  
  22.     $("#uktyry").submit(function() {
  23. 		var imie = $('input[name=imie]').val();
  24. 		var email = $('input[name=email]').val();
  25. 			$.ajax({
  26. 				type: "POST",
  27. 				url: "jquery.php",
  28. 				data: "imie=" + imie + "&email=" + email,
  29. 				cache: false,
  30. 				dataType: "json",
  31. 				success: function(data){
  32.  
  33. 					$('.respone').html(data.tresc);
  34. 				}
  35. 		});
  36.     return false;
  37.     });	
  38.  
  39.     });
  40.     </script>
  41.     </head>
  42.     <body>
  43.      <div class="respone"></div>
  44.     <form method="Post" id="pokazany" action="">
  45.     Ilość: <input type="text" name="ilosc" />
  46.     <input type="submit" name="show" value="Zamawiam" />
  47.     </form>
  48.  
  49.    <form method="Post" action="" id="uktyry" style="display: none; clear: both; overflow:hidden;">
  50.         Imie i nazwisko: <input type="text" name="imie" /><br />
  51.         Email: <input type="text" name="email" /><br />
  52.         Telefon: <input type="text" name="telefon" /><br />
  53.         <input type="submit" name="send" value="Wyślij zamówienie" />
  54.         </form>
  55.     </body>
  56.     </html>
  57.  
[HTML] pobierz, plaintext


pliki jquery.php

[PHP] pobierz, plaintext 
  1.  
  2. <?php
  3.     if(isset($_POST['email'])){
  4.         $email = $_POST['email'];
  5.         $telefon = $_POST['telefon'];
  6.        if (@mail($adresdo, $temat, 'asd')) {
  7.             echo json_encode(array('status' => 'oki', 'tresc' => "Dziekujemy za złożenie zamówienia. W ciągu 24 skontaktujemy się z Państwem w celu potwierdzenia oraz realizacji zamówienia."));
  8.             } else {
  9.                 echo  json_encode(array('status' => 'fail', 'tresc' => "Nic z tego"));
  10.                 }
  11. 	}
  12.  ?>	
[PHP] pobierz, plaintext
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.