Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript] Jak przed wysłaniem formularza sprawdzić czy e-mail wpisany w input jest już w bazie ?
Forum PHP.pl > Forum > Przedszkole
Elber
13.01.2012, 19:57:42
Witam,

od razu zacznę że nie mam kompletnego pojęcia o AJAX'ie sad.gif A szukam jak sprawdzić nie wysyłając formularza czy podany e-mail istnieje w bazie, chciałbym aby przy kliknięciu w <input type="submit" /> wyskoczył alert js. Jak coś takiego najprościej uzyskać ?
jaslanin
13.01.2012, 20:22:33
http://api.jquery.com/jQuery.post/

Dokładnie to przypatrz się:

Example: Posts to the test.php page and gets contents which has been returned in json format
Kod
<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>

Kod
$.post("test.php", { "func": "getNameAndTime" },
function(data){
   console.log(data.name); // John
   console.log(data.time); //  2pm
}, "json");
Elber
13.01.2012, 20:31:49
W sumie to niby coś znalazłem

Kod
$(document).ready(function(){
                    $("#email").change(function(){
                        var email = $("#email").val();
                    if(email.length > 3){
                        $("#status").html(\'Trwa sprawdzanie...\');

                        $.ajax({
                            type: "POST",
                            url: "email.php",
                            data: "email="+ email,
                            success: function(server_response){
                            
                                $("#status").ajaxComplete(function(event, request){
                                    if(server_response == \'0\'){
                                        $("#status").html(\'<font color="Green">Available</font>\');
                                        CheckEmail = true;
                                    } else if(server_response == \'1\'){
                                        $("#status").html(\'<font color="red">Not Available</font>\');
                                        CheckEmail = false;
                                    }
                                });
                            }
                        });
                    } else {
                        $("#status").html(\'<font color="#cc0000">Username too short</font>\');
                        CheckEmail = false;
                    }

                    return false;
                    });


Ale nie wiem dokładnie jakim POSTem te dane są przesyłane żeby zrobić if(isset($_POST['co tu ?'])){}
jaslanin
13.01.2012, 21:16:18
Sam zapisałeś co wysyłasz:
Kod
data: "email="+ email,


więc tam gdzie masz co tu? powinno być email
Elber
13.01.2012, 21:22:53
Doszedłem do tego smile.gif Ale teraz mam problem, otórz cały czas wyskakuje mi info że podany email istnieje ... oto mój kod:

Kod
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
                <script type='text/javascript'>
                    var CheckEmail;

                    function check(form){
                        var message ="";
                        if(form.email.value == ""){
                            message +="Proszę wpisać adres e-mail !\n";
                        }
                        if(message != ""){
                            alert(message);
                            return false;
                        }
                        if(!CheckEmail){
                            alert('Podany adres e-mail już istnieje w naszej bazie !');
                            return false;
                        }
                    }
                    
                    $(function(){
                    $("#email").change(function(){
                        var email = $("#email").val();
                    if(email.length > 3){
                        $.ajax({
                            type: "POST",
                            url: "email.php",
                            data: "check_email="+ email,
                            success: function(server_response){
                            
                                $("#status").ajaxComplete(function(event, request){
                                    if(server_response == '0'){
                                        CheckEmail = true;
                                    } else if(server_response == '1'){
                                        CheckEmail = false;
                                    }
                                });
                            }
                        });
                    } else {
                        CheckEmail = false;
                    }

                    return false;
                    })
                });
                </script>


Gdzie są błędy questionmark.gif
potreb
13.01.2012, 22:12:41
A php zwraca ci poprawny wynik? Używaj firebuga do sprawdzania błędów js.
Elber
13.01.2012, 23:06:22
Jak to zrobić aby nie musieć tworzyć osobnego pliku .php tylko np. wstawić kod odpowiedzialny za sprawdzanie czy e-mail jest przed wyświetlenie formularza questionmark.gif Co php powinien zwracać questionmark.gif

Co PHP powinien zwracać żeby zadziałał ten JS ?
erix
13.01.2012, 23:10:24
Cytat
Jak to zrobić aby nie musieć tworzyć osobnego pliku .php tylko np. wstawić kod odpowiedzialny za sprawdzanie czy e-mail jest przed wyświetlenie formularza Co php powinien zwracać

Surową odpowiedź, bez żadnych widoków.
Elber
13.01.2012, 23:22:34
czyli w tym wypadku 1 bądź 0 questionmark.gif Bo jak dam echo '1'; bądź echo '0'; to i tak nie działa ... cały czas wyskakuje że e-mail jest już w bazie

EDIT:

OKI biggrin.gif Ogarnąłem to biggrin.gif Działa tak jak należy...ale da się jakoś zrobić aby ta funkcja sprawdzania w php nie była w oddzielnym pliku questionmark.gif Tylko w tym co mam ten kawałek z formularzem ?
erix
13.01.2012, 23:23:01
A o czym napisałem?
Elber
13.01.2012, 23:33:48
Ok, rozumiem w takim razie ze nie ma takiej opcji ... Mam jeszcze jedno pytanko smile.gif Bo jak standardowo generuje formularz to automatycznie do value="" ładuje się e-mail z bazy danej osoby którą chce zedytować, a skrypt js sprawdza tego maila dopiero po tym jak wartość tego inputu się zmieni, czyli jak akurat e-maila nie chce edytować to wywala że e-mail jest błędy, dopiero jak zmienię tam coś i z powrotem na ten stary to działa...jak to ominąć questionmark.gif
Ilware
13.01.2012, 23:35:22
Ni da się , twój plik zwraca sporą część treści + nagłówki, które AJAX potraktuje jako string i uzna że jest błąd, dlatego musisz to mieć w osobnym pliku, najlepiej takim który jest przystosowany do JSON'a.

Oprócz maila masz pewnie jeszcze jakieś inne dane np Login czy nazwę, więc sprawdź czy dana nazwa jest powiązana z tym mailem, jeżeli tak to przepuść. Generuje to oczywiście możliwość że powstaną dwie identyczne nazwy z identycznym mailem. Więc jeżeli mail i nazwa się zgadzają to po porostu ich nie edytuj.
Elber
13.01.2012, 23:42:28
Sprawdzając czy Mail jest już w bazie wysyłam id usera i mail z formualarza, tak wygląda kod:

[PHP] pobierz, plaintext 
  1. $zap = mysql_query('SELECT id FROM partners WHERE email = "'.$email.'" AND id <> "'.$id.'"');
  2.  
  3. 	if(mysql_num_rows($zap) <> 0){
  4. 		echo 1;
  5.     } else {
  6. 		echo 0;
  7. 	}
[PHP] pobierz, plaintext


Ogólnie wydaje mi się że muszę w tym JS gdzie teraz jest $("#email").change(function(){ zmienić to change na coś innego, tylko za bardzo nie wiem na co ...
Ilware
13.01.2012, 23:49:04
według kodu js który dałeś wcześniej nie przekazujesz id więc nie wiem czemu się do niego odwołujesz, ale w sumie przez przypadek w dobrym kierunku idziesz.

[SQL] pobierz, plaintext 
  1. SELECT id FROM partners WHERE email = "'.$email.'"
[SQL] pobierz, plaintext


a następnie sprawdź czy id jakie dostałeś z bazy danych nie jest równe temu które wysłałeś AJAX'em, jeżeli tak to przepuść jeżeli nie to zablokuj smile.gif
Elber
13.01.2012, 23:53:54
Mój kod JS teraz wygląda tak:

Kod
<script type='text/javascript'>
                    var CheckEmail = "";
                    
                    $(function(){
                        $("#email").change(function(){
                            var email = $("#email").val();
                            var id = "'.$_GET['id'].'";
                        
                            if(email.length > 3){
                                $.ajax({
                                    type: "POST",
                                    url: "ajax.php",
                                    data: {check_email: email, id: id},
                                    success: function(result){
                                        if(result == 0){
                                            CheckEmail = true;
                                        } else if(result == 1){
                                            CheckEmail = false;
                                        }
                                    }
                                });
                            } else {
                                CheckEmail = false;
                            }
                            return false;
                        })
                    });
                    
                    function check(form){
                        var message = "";
                        if(form.email.value == ""){
                            message +="Proszę wpisać adres e-mail !\n";
                        }
                        if(message != ""){
                            alert(message);
                            return false;
                        }
                        if(!CheckEmail){
                            alert('Podany adres e-mail już istnieje w naszej bazie !');
                            return false;
                        }
                    }
                </script>


I teraz najlepszą opcją było by aby ten e-mail sprawdzał się w momencie kliknięcia na submit, bo teraz sprawdza się po każdej zmianie inputa...tylko jak zmienię tam z

$("#email").change(function(){

na

$("#submit").click(function(){

to formularz się nie wysyła ...
Ilware
14.01.2012, 00:07:42
w form dodaj wywołanie onSubmit="return twoja_funkcja_sprawdzajaca()" jeżeli zwrócisz w niej true to formularz się wyśle jak false to zablokuje wysyłkę formularza
Elber
14.01.2012, 00:20:44
Tam mam już onsubmit="return check(this); do sprawdzenia czy jest coś wpisane w inputy smile.gif)
Ilware
14.01.2012, 00:26:11
to do tej funkcji sprawdzającej dopisz AJAX'a i masz problem rozwiązany . smile.gif
Elber
14.01.2012, 00:30:17
Na to nie wpadłem, tylko nie wiem czy dobrze je połączyłem

Kod
                <script type=\'text/javascript\'>
                    function check(form){
                        var message = "";

                        if(form.email.value == ""){
                            message +="Proszę wpisać adres e-mail !\n";
                        }
                        if(form.name.value == ""){
                            message +="Proszę wpisać nazwę firmy !\n";
                        }
                        if(form.address.value == ""){
                            message +="Proszę wpisać adres firmy !\n";
                        }
                        if(form.postcode.value == ""){
                            message +="Proszę wpisać kod pocztowy !\n";
                        }
                        if(form.city.value == ""){
                            message +="Proszę wpisać nazwę miasta !\n";
                        }
                        if(form.nip.value == ""){
                            message +="Proszę wpisać NIP !\n";
                        }
                        if(message != ""){
                            alert(message);
                            return false;
                        }

                        var CheckEmail = "";

                        var email = $("#email").val();
                        var p_id = "'.$_GET['id'].'";

                        $.ajax({
                            type: "POST",
                            url: "live_query.html",
                            data: {check_email: email, p_id: id},
                            success: function(result){
                                if(result == 0){
                                    CheckEmail = true;
                                } else if(result == 1){
                                    CheckEmail = false;
                                }
                            }
                        });
                        
                        if(!CheckEmail){
                            alert(\'Podany adres e-mail już istnieje w naszej bazie !\');
                            return false;
                        }
                    }
                </script>
Ilware
14.01.2012, 00:35:04
Kod wygląda okej, ale jedna rzecz rzuciła mi się w oczy $_GET['id'], jeżeli pobierasz id z urla to kod będzie bardzo podatny na ataki, zwłaszcza że później przez to id validujesz coś. Spróbuj je jakoś zakodować (choćby base64 , zawsze coś), a najlepiej jak byś przekazywał je w post a nie w get smile.gif

p.s.
masz błąd w nazwie zmiennych 

[HTML] pobierz, plaintext 
  1.  var p_id = "'.$_GET['id'].'"; //tworzysz p_id
  2.  data: {check_email: email, p_id: id}, // a przekazujesz id powinno być id : p_id
[HTML] pobierz, plaintext


no i strona powinna być skryptem php a masz html 

[HTML] pobierz, plaintext 
  1. url: "live_query.html",
[HTML] pobierz, plaintext
Elber
14.01.2012, 00:45:49
Zmienne poprawiłem, a .html to mod_rewrite smile.gif


HMm jednak coś jest nie tak, bo mimo że widzę że wysyła zapytanie do pliku live_query.html i ten odsyła odpowienio 1 lub 0 to i tak wyskakuje błąd że e-mail jest już w bazie ;/
Ilware
14.01.2012, 01:07:29
spróbuj dodać return true do js w ostatniej lini
Elber
14.01.2012, 12:51:27
Nic to nie pomogło sad.gif Chyba coś źle połączyłem te 2 funkcje w 1 sad.gif

Kod
<script type=\'text/javascript\'>
                    var CheckEmail = "";

                    function check(form){
                        var message = "";
                        
                        var email = $("#email").val();
                            var p_id = "'.$_GET['id'].'";
                            $.ajax({
                                type: "POST",
                                url: "live_query.html",
                                data: {check_email: email, id: p_id},
                                success: function(result){
                                    if(result == 0){
                                        CheckEmail = true;
                                    } else if(result == 1){
                                        CheckEmail = false;
                                    }
                                }
                            });

                        if(form.email.value == ""){
                            message +="Proszę wpisać adres e-mail !\n";
                        }

                        if(message != ""){
                            alert(message);
                            return false;
                        }

                        if(!CheckEmail){
                            alert(\'Podany adres e-mail już istnieje w naszej bazie !\');
                            return false;
                        }
                    }
                </script>


Już prawie jest OK tylko teraz najpierw wyskakuje alert że e-mail jest w bazie a dopiero po tym wysyła się POST ajaxem do pliku... jak zmienić tą kolejność ?
gorden
14.01.2012, 13:32:28
if(!checkMail) daj w success ajaxa, zaraz po deklaracji tej zmiennej w warunku.
erix
14.01.2012, 13:32:31
Cytat
Już prawie jest OK tylko teraz najpierw wyskakuje alert że e-mail jest w bazie a dopiero po tym wysyła się POST ajaxem do pliku... jak zmienić tą kolejność ?

http://eriz.pcinside.pl/weblog/ajax-w-jque...script-218.html
Elber
14.01.2012, 13:40:48
Cytat(gorden @ 14.01.2012, 13:32:28 ) *
if(!checkMail) daj w success ajaxa, zaraz po deklaracji tej zmiennej w warunku.

Dawałem, ale to nic nie zmienia bo nie czeka na odpowiedź tylko pomija tego IF'a ...

A to http://eriz.pcinside.pl/weblog/ajax-w-jque...script-218.html czytałem ale nie za bardzo mam pomysł jak wdrożyć to w ten mój skrypt sad.gif
erix
14.01.2012, 13:50:47
Przeczytać ze zrozumieniem do skutku, samodzielnie wykonać tamte przykłady, bo od samego czytania jeszcze się tyłek nie ruszył.
Elber
14.01.2012, 14:41:43
BO tak jak tam jest napisane, działa dodanie async: false ... ale wstrzymuje to kompletnie wszystko, a nie wiem jak tego callback użyć

//Edit z drugiej strony w sumie wystarczy przenieść tego ajax'a na koniec i problem z zamrożeniem wykonywania rzeczy które są pod tym znika, gdyż jest to ostatnie js robi, ale co nie zmienia faktu że nie wiem jak tego callback użyć w tym przykładzie

OK, więc mam zrobione tak jak podałem poniżej i działa tak jak należy, jednak faktycznie przy kliknięciu na submit raz na krócej raz na dłużej przywiesi stronę na czas sprawdzenia e-mailu w bazie ... jak miała by w moim wypadku wyglądać tak funkcja z callback questionmark.gif

Kod
        function check(form){
            var message = "";


            if(form.email.value == ""){
                message +="Proszę wpisać adres e-mail !\n";
            } else {
                var email = $("#email").val();
                var p_id = "$_GET['id']";

                $.ajax({
                    type: "POST",
                    url: "live_query.html",
                    data: {check_email: email, id: p_id},
                    success: function(result){
                        if(result != 0){
                            message +="Podany adres e-mail już istnieje w naszej bazie !\n";
                        }
                    },
                    async: false
                });
            }

            if(message != ""){
                alert(message);
                return false;
            }
        }
erix
14.01.2012, 15:35:13
Cytat
jak miała by w moim wypadku wyglądać tak funkcja z callback

A chociaż skopiowałeś kod ze strony, do której Ci zalinkowałem, żebyś zrozumiał, jak to działa?
Elber
14.01.2012, 17:24:50
1. Tak
2. Sęk w tym że nie rozumiem sad.gif Nie za bardzo jeszcze ogarniam JS
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.