Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Required nie działa, po dodaniu ajax
Szymciosek
post 20.03.2013, 17:11:44
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
Go to the top of the page
+Quote Post
viking
post 20.03.2013, 17:15:26
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


--------------------
Go to the top of the page
+Quote Post
Szymciosek
post 20.03.2013, 17:21:34
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
Go to the top of the page
+Quote Post
viking
post 20.03.2013, 17:27:10
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.


--------------------
Go to the top of the page
+Quote Post
Szymciosek
post 20.03.2013, 17:30:51
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.
Go to the top of the page
+Quote Post
viking
post 20.03.2013, 17:35:07
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


--------------------
Go to the top of the page
+Quote Post
Szymciosek
post 20.03.2013, 17:45:10
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>
    <script>
        $('input[placeholder], textarea[placeholder]') .placeholder();
, ale to nie zmienia raczej nic tylko w razie czego jakby przeglądarka nie obsługiwała required, to dodaje.

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>
Go to the top of the page
+Quote Post
mortus
post 21.03.2013, 08:55:54
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
Go to the top of the page
+Quote Post
Szymciosek
post 21.03.2013, 16:07:55
Post #9





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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


Ogólnie prawie ok, ale problemem jest e-mail, zamiast małpy @ otrzymuję %40... przez to przestaje mi działać ze strony php.

Poradziłem sobie dodając w php:
  1. urldecode($_POST['email']);
Go to the top of the page
+Quote Post

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: 15.07.2025 - 20:07