Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl


jquery dodanie/edycja formularza
PaFaT
Napisane: 26.02.2013, 15:58:15





Grupa: Zarejestrowani
Postów: 30
Dołączył: 27.03.2012

Ostrzeżenie: (0%)
-----
Cóż...

Nie da się zmienić wyglądu okna komunikatu (jest to okno systemowe).
Można użyć metody window.open() w celu otwarcia nowego okna, jednak wystąpią rózne komplikacje (okno musi być modalne), a poza tym może być to zablokowane przez AdBlockera.

Można użyć warstw HTML w celu uzyskania modalnej warstwy.
Po prostu do sekcji <head> dopisz następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function openAlert(info, height, width)
  3. {
  4. var modal = document.getElementById("modalDiv");
  5. var transparent = document.getElementById("transparentDiv");
  6. if(!modal || !transparent) return;
  7. var docW = window.innerWidth;
  8. docW = docW ? docW : Math.max(parseInt(document.documentElement.clientWidth), parseInt(document.documentElement.scrollWidth));
  9. var docH = window.innerHeight;
  10. docW = docW ? docW : Math.max(parseInt(document.documentElement.clientHeight), parseInt(document.documentElement.scrollHeight));
  11.  
  12. var opacity = 60;
  13.  
  14. transparent.style.opacity = opacity / 100;
  15. transparent.style.filter = "Alpha(opacity=" + opacity + ")";
  16. transparent.style.width = docW + "px";
  17. transparent.style.height = docH + "px";
  18. transparent.style.zIndex = 1000;
  19. transparent.style.display = "block";
  20.  
  21. width = isNaN(width) ? 400 : width;
  22. height = isNaN(height) ? 200 : height;
  23.  
  24. modal.style.width = width + "px";
  25. modal.style.height = height + "px";
  26. modal.style.position = "absolute";
  27. modal.stylel.left = Math.round((docW - width) / 2) + "px";
  28. modal.style.top = Math.round((docH - height) / 2) + "px";
  29. modal.style.zIndex = 2000;
  30. modal.style.display = "block";
  31.  
  32. var str = info;
  33. str += '<input type="button" value="OK" style="width: 75px; height: 40px; position: absolute; left: ';
  34. str += Math.round((width - 75) / 2);
  35. str += 'px; bottom: 15px; " onclick="closeAlert(); " />';
  36.  
  37. modal.innerHTML = str;
  38. }
  39.  
  40. function closeAlert()
  41. {
  42. var modal = document.getElementById("modalDiv");
  43. var transparent = document.getElementById("transparentDiv");
  44. if(!modal || !transparent) return;
  45. modal.style.display = "none";
  46. transparent.style.display = "none";
  47. }
  48. </script>
[HTML] pobierz, plaintext


oraz, do sekcji <body> taki kod:

[HTML] pobierz, plaintext 
  1. <div id="modalDiv" style="background: #FFFFE1; border: 1px solid #000000; border-radius: 5px; position: absolute; display: none; "></div>
  2. <div id="transparentDiv" style="background: #000000; positon: absolute; left: 0px; top: 0px; display: none"></div>
[HTML] pobierz, plaintext


Aby pokazać okienko należy wpisać formułę:

openAlert(komunikat, szerokość okna, wysokość okna);
  Forum: JavaScript · Podgląd postu: #1028574 · Odpowiedzi: 5 · Wyświetleń: 546

jquery dodanie/edycja formularza
PaFaT
Napisane: 24.02.2013, 21:17:57





Grupa: Zarejestrowani
Postów: 30
Dołączył: 27.03.2012

Ostrzeżenie: (0%)
-----
Drogi(a) bezbap,

Po pierwsze, sprawdzenie poprawności wpisanych danych najlepiej wykonać w JS.
Aby tego dokonać, należy zmienić kod przycisku wysyłającego formularz na taki:

[HTML] pobierz, plaintext 
  1. <input type="button" value="Wyślij" name="submite" class="submit" onclick="sprawdzFormularz(this.form); " />
[HTML] pobierz, plaintext


W sekcji <head> należy dodać następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function sprawdzFormularz(form)
  3. {
  4. if(!form) return;
  5. var nazwa = form.elements["name"];
  6. var email = form.elements["email"];
  7. var tresc = form.elements["message"];
  8. if(!nazwa || !email || !tresc) return;
  9.  
  10. var reg = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@([a-zA-Z0-9_-]+\.)+([a-zA-Z]{2,4})$/i;
  11.  
  12. var bledy = false;
  13. var komunikat = "";
  14.  
  15. if(nazwa.value == ""){
  16. komunikat = "Nie wpisano nazwy.\n";
  17. bledy = true;
  18. }
  19.  
  20. if(email.value == ""){
  21. komunikat += "Nie wpisano adresu e-mail.\n";
  22. bledy = true;
  23. }
  24.  
  25. if(tresc.value == ""){
  26. komunikat += "Nie wpisano treści wiadomości\n";
  27. bledy = true;
  28. }
  29.  
  30. if(email.value != "" && email.value.match(reg) == null){
  31. komunikat += "Podany adres e-mail jest nieprawidłowy.\n";
  32. bledy = true;
  33. }
  34.  
  35. if(bledy){
  36. window.alert(komunikat);
  37. return;
  38. }
  39.  
  40. form.submit();
  41. }
  42. </script>
[HTML] pobierz, plaintext


Po drugie, aby wywołać komunikat potwierdzający wysłanie wiadomości, zmień zawartość pliku wyslij-maila.php na taką:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Refresh" content="1; url=strona_z_formularzem_kontaktowym.php?wyslano=yes" />
  4. </head><body>
  5. <?php
  6.  
  7. $nazwa = $_POST['name'];
  8.  
  9. $email = $_POST['email'];
  10.  
  11. $tresc = $_POST['message'];
  12.  
  13. $adres = 'moj.adres@example.com';
  14.  
  15. $temat = 'Wiadomość ze strony';
  16.  
  17. $znaczniki = 'From: ' . $email . ' <' . $nazwa . '>';
  18.  
  19. mail($adres, $temat, $tresc, $znaczniki);
  20.  
  21. ?>
  22.  
  23. </body></html>
[HTML] pobierz, plaintext


Zaś w pliku z formularzem kontaktowym (pamiętaj, że musi mieć rozszerzenie .php):
jeśli masz skrypt wykonywany po załadowaniu strony (<body onload="", window.onload = function() itp.) dopisz do niego:

[PHP] pobierz, plaintext 
  1. <?php if($_GET['wyslano'] && $_GET['wyslano'] == 'yes') echo "window.alert('Wiadomość została pomyślnie wysłana.'); location.href = 'strona_z_formularzem_kontaktowym.php'; " ?>
[PHP] pobierz, plaintext


lub, jeśli nie masz skryptu reagującego na zdarzenie onload, dodaj do sekcji <head> następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. <?php if($_GET['wyslano'] && $_GET['wyslano'] == 'yes') echo "window.alert('Wiadomość została pomyślnie wysłana.'); location.href = 'strona_z_formularzem_kontaktowym.php'; " ?>
  5. }
  6. </script>
[HTML] pobierz, plaintext


Nie zapomnij podstawić nazwy swojego dokumentu za strona_z_formularzem_kontaktowym.

Oby zadziałało! smile.gif
  Forum: JavaScript · Podgląd postu: #1028137 · Odpowiedzi: 5 · Wyświetleń: 546

jquery dodanie/edycja formularza
PaFaT
Napisane: 21.02.2013, 19:52:23





Grupa: Zarejestrowani
Postów: 30
Dołączył: 27.03.2012

Ostrzeżenie: (0%)
-----
Drogi(a) bezbap,

Znacznik <form> powinien wyglądać następująco:
[HTML] pobierz, plaintext 
  1. <form action="/wyslij-maila.php" method="post">
[HTML] pobierz, plaintext


Również polu <textarea> trzeba nadać nazwę, np. name="message".

Musisz pamiętać, że nie każdy serwer jest w stanie wysłać maila - na pewno nie serwer lokalny.
Kiedyś sam szukałem darmowego serwera obsługującego wysyłanie maili - znalazłem kilka, ale działa tylko CBA.

Natomiast plik wyslij-maila.php, znajdujący się w głównym katalogu strony powinien być mniej więcej taki:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. window.onload = function()
  5. {
  6. history.go(-1);
  7. }
  8. </script>
  9. </head><body>
  10. <?php
  11. $nazwa = $_POST['name'];
  12. $email = $_POST['email'];
  13. $tresc = $_POST['message'];
  14.  
  15. $adres = 'moj.adres@example.com';
  16. $temat = 'Wiadomość ze strony';
  17. $znaczniki = 'From: ' . $email . ' <' . $nazwa . '>';
  18.  
  19. mail($adres, $temat, $tresc, $znaczniki);
  20. ?>
  21. </body></html>
[HTML] pobierz, plaintext


Powinno zadziałać.

Mogą jednak pojawić się problemy z polskimi znakami.
Zobacz tutaj.
  Forum: JavaScript · Podgląd postu: #1027414 · Odpowiedzi: 5 · Wyświetleń: 546


New Posts  Nowe odpowiedzi
No New Posts  Brak nowych odpowiedzi
Hot topic  Popularny temat (Nowe)
No new  Popularny temat (Brak nowych)		 Poll  Sonda (Nowe)
No new votes  Sonda (Brak nowych)
Closed  Zamknięty temat
Moved  Przeniesiony temat
 

RSS Wersja Lo-Fi Aktualny czas: 3.05.2024 - 07:29
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn