Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP] Autouzupełnianie formularza
Forum PHP.pl > Forum > Przedszkole
webspy
Witam,
Mam taki mały problem, a mianowicie chodzi o autouzupełnianie formularza.
Przykład:
Po wpisaniu w pierwszym input imienia i nazwiska ma uzupełniać pozostałe input i textarea o adres, email, telefon itp.
Wszystko jest zapisane w bazie mysql.
Jest jakiś dobry sposób na ten problem?
Czytałem o autocomplete ale nie wiem jak połączyć to z bazą mysql i rozwiązanie tego zajmnie mi trochę czasu (powoli to rozgryzę) jeśli nie ma innego rozwiązania to będę kombinował z tym autocomplete.

Najprostrzym rozwiązaniem byłoby zrobienie jednego formularza z polem imie i nazwisko i przejscie do drugiej strony z weryfikacja danych, jesli taki koles istnieje w bazie to uzupelnia a jesli nie to zostaje puste, to umiem zrobić. Tylko chciałbym bez odswieżania strony.

Pozdrawiam.
tab
Ja bym tutaj wykorzystał JavaScript + Ajax. Przykładowy kod:
  1. <input type="text" id="name">
  2. <input type="text" id="email">
  3. <input type="text" id="phone">

[JAVASCRIPT] pobierz, plaintext
  1. <script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() // po zaladowaniu całego DOM
  4. {
  5. $('#name').change(function() // po zmiane zawartosci inputa name
  6. {
  7. var inputName = $('#name').val();
  8. $.ajax({
  9. type : "POST", // dane przesylamy metoda POST
  10. url : "db.php",
  11. dataType : "json", // w formacie JSON
  12. data : { // dane do wyslania
  13. name : inputName;
  14. },
  15. success : function(json) // zdarzenai odpalane przy powodzeniu
  16. {
  17. $('#email').val(json['email']);
  18. $('#phone').val(json['phone']);
  19. },
  20. error : function() // przy bledzie
  21. {
  22. alert('ERROR');
  23. }
  24. });
  25. });
  26. });
  27. </script>
[JAVASCRIPT] pobierz, plaintext

  1. <?php
  2. if (isset($_POST['name']))
  3. {
  4. $name = $_POST['name'];
  5. $pdo = new PDO(...); // tutaj w zaleznosci od twoich parametrow
  6. $stmt = $pdo->query("SELECT phone, email FROM tabela WHERE name='$name'");
  7. $res = $stmt->fetch(PDO::FETCH_ASSOC); // ustawiamy flage informujaca o tym, ze chcemy utworzy tablice asocacyjna
  8. $stmt->closeCursor();
  9. echo json_encode($res); // konwertujemy dane na format json aby pozniej moc sie do nich wygodnie odwolywac w js
  10. }

JSON to po prostu sposob zapisu informacji, alternatywnie moglbys uzyc XML albo nawet zwyczajnie wypisac tekst uzywajac np przecinka do jego odgradzania, a w skrypcie js uzyc split do rozdzielenia. Osobiscie preferuje jsona. PDO to obiektowa biblioteka do komunikacji ze SQL, jezeli jej nie znasz mozesz uzyc zamiast new, mysqlconnect; $pdo->query, mysql_query; $stmt->fetch, mysql_fetch_row itd... Mam nadzieje w kazdym razie ze o to ci chodzilo
b4rt3kk
A pomyślałeś o sytuacji gdy jest więcej osób o takim samym imieniu i nazwisku? Nie wiem jakie zastosowanie ma Twój skrypt, ale co w przypadku gdy ktoś na chybił trafił zacznie wpisywać imiona i nazwiska i mu dane wyskoczą? Takie jawne przekazywanie danych osobowych jest niezgodne z prawem.
webspy
Teraz muszę rozgryźć ten kodzik i przetestuje.
Dzięki wielkie.


Cytat(b4rt3kk @ 1.12.2012, 03:23:20 ) *
A pomyślałeś o sytuacji gdy jest więcej osób o takim samym imieniu i nazwisku? Nie wiem jakie zastosowanie ma Twój skrypt, ale co w przypadku gdy ktoś na chybił trafił zacznie wpisywać imiona i nazwiska i mu dane wyskoczą? Takie jawne przekazywanie danych osobowych jest niezgodne z prawem.


To będzie system zamknięty i nie będą miały dostępu asoby trzecie więc myślę, że nie będzie problemu.



Coś tu nie chodzi jak powinno, proszę o sprawdzenie czy dobrze to robię:

  1. $pdo = new PDO('mysql:dbname='.$nazwa_bazy.';host='.$serwer.'', '$login', '$haslo');
  2. $stmt = $pdo->query("SELECT adres, telefon FROM tabela WHERE personalia='$name'");


w js zmienilem to:
Kod
$('#adres').val(json['adres']);
    $('#telefon').val(json['telefon']);


  1. <input type="text" id="name">
  2. <input type="text" id="adres">
  3. <input type="text" id="telefon">



Po wpisywaniu w pierwszym input name, wyskakują jakieś dziwne dane, nazwy odwiedzanych stron www, zakładki które mam otwarte itp.
Nie wypełnia następnych pól automatycznie.
Co tu może być zle?
tab
PDO ciezko mi powiedziec ,bo zalezy od twojego hostingu. Np. ja w host daje localhost, w db nazwe bazy ktora jest moja nazwa uzytkownika, w login tez nazwe uzytkownika, w haslo wiadomo. Ale jak ci zadne blad mysql nie wyskakuje to mysle ze tu nie ma problemu. Upewnij sie ze jak zmieniles email na adres i phone na telefon to wprowadziles zmiany wszedzie. Poza tym jaka strukture ma twoja tabela z ktorej pobierasz dane? Istnieje jeszcze mozliwosc ze to problem ze spacja lub polskimi znakami. Sprobuj zrobic test wpisujac w bazie danych rekordy bez polskich znakow i spacji i potem w inpucie sprawdzic czy wszystko bedzie dobrze chodzic. Poza tym otworz konsole (F12) i powiedz czy wywala ci jakies informacje. I moze zamien jeszcze:
[JAVASCRIPT] pobierz, plaintext
  1. success : function(json)
  2. {
  3. alert(json);
  4. }
[JAVASCRIPT] pobierz, plaintext

zeby sprawdzic co w ogole zawiera json
kaem
Skrypt powinien wyglądać następująco:
- pobierasz wszystkie interesujace Cie dane osoby: imię, nazwisko, telefon, adres itp: i tworzysz sobie z tego tablicę PHP
- robisz z tych danych JSON'a, którego zwracasz do skryptu autocomplet'a (zakładam, że będziesz używał jQuery UI Autocomplete)
- jQuery ui autocomplete domyślnie jako wartość pola formularza wstawia element jsona o kluczu 'id', a jako tekst element o kluczu chyba 'value' (czy może 'label'?).
- w pluginie autocomplet'a piszesz własną obsługę na zdarzenie 'onSelect', i tam możesz sobie wypełnić interesujące Cię pola, czyli coś w stylu
  1. select: function(event, ui) {
  2. var telefon = ui.item.telefon;
  3. $('#telefon').val(telefon);
  4. // (...) itd.



Także nie ma sensu pisać oddzielnego skryptu js do wypełniania tych danych, skoro można wszystko załatwić korzystając z autocomplete i będzie działało to o wiele lepiej.

Cytat
To będzie system zamknięty i nie będą miały dostępu asoby trzecie więc myślę, że nie będzie problemu.

Ale przecież ciągle pozostaje problem istnienia osób o tym samym imieniu i nazwisku...
W autocomplete wybierasz konkretną osobę z listy podpowiedzi i dzięki temu wiesz dokładnie czyje dane z bazy pobierasz do formularza.


webspy
Dobra wykombinowalem takie coś:

  1. <input type="text" id="personalia">
  2. <input type="text" id="adres">
  3. <input type="text" id="telefon">


Kod
<script type="text/javascript">
    $(document).ready(function(){
        var ac_config = {
            source: "baza.php",
            select: function(event, ui){
                $("#personalia").val(ui.item.personalia);
                $("#adres").val(ui.item.adres);
                $("#telefon").val(ui.item.telefon);
                return false;
            },
            minLength:1
        };
        $("#personalia").autocomplete(ac_config);
    });

    </script>


W pliku baza wyswietla wszsytkie dane w formie JSON - sprawdzalem
Jak zrobić aby szykało tylko jednego wyniku? co dodać do script a co do php (pewnie jakiś get)

  1. <?php
  2. $pdo = new PDO('mysql:polaczenie z baza);
  3. $stmt = $pdo->query("SELECT personalia, adres, telefon FROM tabela");
  4. $res = $stmt->fetchall(PDO::FETCH_ASSOC);
  5. $stmt->closeCursor();
  6. echo json_encode($res);
  7. ?>


Nie wyświetla żadnego wyniku po wpisywaniu w input, pole robi się jakby aktywne jakby miało się coś wyświetlać ale nic nie wyświetla.

Proszę o pomoc już przeczytałem chyba setki stron z tym problemem.
Może mam złe pliki js?
  1. <link rel="stylesheet" href="http://af-design.com/styles/jquery-ui-1.8.1.custom.css" type="text/css" media="all" />
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>


Czy to wystarczy czy trzeba coś więcej?

Wyswietla juz wyniki, lecz zostal problem: nie uzupelnia reszty input'ow

Ściągnąłem demo i wychodzi na to że już pokazują się wyniki tylko że z błędem



Co może być spowodowane takim wyświetlaniem wyniku?
Ten błąd pokazuje się tylko przy wpisaniu pierwszej litery jak już wpiszę drugą to wyświetla prawidłowo.
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.