![]() |
![]() ![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 1 168 Pomógł: 126 Dołączył: 5.02.2010 Skąd: Świdnica Ostrzeżenie: (0%) ![]() ![]() |
Witam,
mam w html formularz z polami, niektóre pola mają zadeklarowane w sobie, że są required... wszystko działało dopóki nie dodałem ajax żeby wysłąć maila bez przeładowania strony. Kod <form id="contact_form" action="" method="POST"> Przykładowe pole wygląda tak: Kod <label for="username"> </label> <input type="text" id="username" name="username" placeholder="Imię i nazwisko" required /> To dodałem: Kod $(document).ready(function(){ $("#sendmail").click(function(){ var username = $("#username").val(); var usermail = $("#usermail").val(); var subject = $("#subject").val(); var message = $("#message").val(); var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact'; send(datastr); return false; }); }); function send(datastr){ $.ajax({ type: "POST", url: "http://localhost/martamorawiecka/website_v.3.0/trunk/web/app_dev.php/test", data: datastr, cache: false }); } Po usunięciu tego wszystko wraca do normy. Dla mnie to sprawa magiczna, bo z js nie mam takiego doświadczenia. Czemu tak się dzieje i jak to naprawić? Zauważyłem, że po wywaleniu Kod return false; required wraca do normy, ale wtedy działa to z przekierowaniem... a tak nie może być.
Ten post edytował Szymciosek 20.03.2013, 16:32:40 |
|
|
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 378 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%) ![]() ![]() |
Kod $("#sendmail").click(function(e){
e.preventDefault(); ... Ten post edytował viking 20.03.2013, 17:16:00 -------------------- |
|
|
![]()
Post
#3
|
|
Grupa: Zarejestrowani Postów: 1 168 Pomógł: 126 Dołączył: 5.02.2010 Skąd: Świdnica Ostrzeżenie: (0%) ![]() ![]() |
Kod $(document).ready(function(){ $("#sendmail").click(function(e){ e.preventDefault(); var username = $("#username").val(); var usermail = $("#usermail").val(); var subject = $("#subject").val(); var message = $("#message").val(); var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact'; send(datastr); return false; }); }); function send(datastr){ $.ajax({ type: "POST", url: "http://localhost/martamorawiecka/website_v.3.0/trunk/web/app_dev.php/test", data: datastr, cache: false }); } Niestety nie działa. W konsoli otrzymuję komunikat w przypadku, gdy próbuję wysłać puste pola. Kod POST http://localhost/mm/website_v.3.0/trunk/web/app_dev.php/test 500 (Internal Server Error) Koniecznie zależy mi na tym: ![]() Ten post edytował Szymciosek 20.03.2013, 17:22:07 |
|
|
![]()
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 378 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%) ![]() ![]() |
To zobacz w logach serwera co się dzieje. 500 o nie wina client-side.
-------------------- |
|
|
![]()
Post
#5
|
|
Grupa: Zarejestrowani Postów: 1 168 Pomógł: 126 Dołączył: 5.02.2010 Skąd: Świdnica Ostrzeżenie: (0%) ![]() ![]() |
Mniej więcej wiem co się dzieje, a dzieje się to, że nie może wysłać maila, bo otrzymuje puste dane, których php otrzymać nie powinien.
Ale to nie tutaj problem, bo w przypadku pustego pola powinno się wyświetlić powyższe pole z informacją, że pole nie może być puste. Problem leży raczej właśnie po stronie tego ajaxa, który blokuje mi to. |
|
|
![]()
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 378 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%) ![]() ![]() |
Z kodu który tutaj podałeś nie wynika żeby była jakaś walidacja. Sklejasz dowolne stringi i przsyłasz je POSTem jako całość.
Kolejna rzecz. słyszałeś o tablicy obiektów? Cytat var data = {
x: '1', y: 'b' } console.log(data.y); Ten post edytował viking 20.03.2013, 17:39:38 -------------------- |
|
|
![]()
Post
#7
|
|
Grupa: Zarejestrowani Postów: 1 168 Pomógł: 126 Dołączył: 5.02.2010 Skąd: Świdnica Ostrzeżenie: (0%) ![]() ![]() |
Dobra, to porównaj te 2 kody:
Przeglądarka: Chrome najnowszy Dodatkowo mam zadeklarowane jeszcze: Kod <script src="{{ asset('assets/javascript/jquery.placeholder.js') }}"></script> , ale to nie zmienia raczej nic tylko w razie czego jakby przeglądarka nie obsługiwała required, to dodaje.<script> $('input[placeholder], textarea[placeholder]') .placeholder(); Nie działa Kod <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <form id="contact_form" action="" method="POST"> <label for="username"> </label> <input type="text" id="username" name="username" placeholder="Imię i nazwisko" required /> <label for="usermail"> </label> <input type="email" id="usermail" name="usermail" placeholder="Adres email" required /> <label for="subject"> </label> <input type="text" id="subject" name="subject" placeholder="Temat" /> <label for="message"> </label> <textarea name="message" id="message" name="message" placeholder="Treść wiadomości" required></textarea> <input type="submit" value="Wyślij" id="sendmail" /> </form> <script> $(document).ready(function(){ $("#sendmail").click(function(){ var username = $("#username").val(); var usermail = $("#usermail").val(); var subject = $("#subject").val(); var message = $("#message").val(); var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact'; send(datastr); return false; }); }); function send(datastr){ $.ajax({ type: "POST", url: "http://localhost/mm/website_v.3.0/trunk/web/app_dev.php/test", data: datastr, cache: false }); } </script> </body> </html> Działa Kod <!DOCTYPE html>
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <form id="contact_form" action="" method="POST"> <label for="username"> </label> <input type="text" id="username" name="username" placeholder="Imię i nazwisko" required /> <label for="usermail"> </label> <input type="email" id="usermail" name="usermail" placeholder="Adres email" required /> <label for="subject"> </label> <input type="text" id="subject" name="subject" placeholder="Temat" /> <label for="message"> </label> <textarea name="message" id="message" name="message" placeholder="Treść wiadomości" required></textarea> <input type="submit" value="Wyślij" id="sendmail" /> </form> </body> </html> |
|
|
![]()
Post
#8
|
|
Grupa: Zarejestrowani Postów: 2 178 Pomógł: 596 Dołączył: 25.09.2009 Skąd: Piwniczna-Zdrój Ostrzeżenie: (0%) ![]() ![]() |
Walidacja HTML5 jest wykonywana po uruchomieniu zdarzenia submit, zatem to właśnie pod to zdarzenie powinieneś podpiąć wysyłanie wiadomości z użyciem AJAX-a.
Poza tym nie widzę sensu tworzenia tutaj dodatkowej funkcji send(), bo w sumie do tego są metody jQuery (z jednej z nich .ajax() nawet korzystasz). Byłbym zapomniał: przykład. Powyżej wykorzystuję najnowszą stabilną wersję jQuery - 1.9.1. Ten post edytował mortus 21.03.2013, 08:57:58 |
|
|
![]()
Post
#9
|
|
Grupa: Zarejestrowani Postów: 1 168 Pomógł: 126 Dołączył: 5.02.2010 Skąd: Świdnica Ostrzeżenie: (0%) ![]() ![]() |
|
|
|
![]() ![]() |
![]() |
Wersja Lo-Fi | Aktualny czas: 15.07.2025 - 20:07 |