[JavaScript][PHP] Autouzupełnianie formularza Opcje

[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:

[HTML] pobierz, plaintext 
<input type="text" id="name">
<input type="text" id="email">
<input type="text" id="phone">
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() // po zaladowaniu całego DOM
{
    $('#name').change(function() // po zmiane zawartosci inputa name
    {
        var inputName = $('#name').val();
        $.ajax({
            type : "POST", // dane przesylamy metoda POST
            url : "db.php",
            dataType : "json", // w formacie JSON
            data : { // dane do wyslania
                name : inputName;
            },
            success : function(json) // zdarzenai odpalane przy powodzeniu
            {
                $('#email').val(json['email']);
                $('#phone').val(json['phone']);
            },
            error : function() // przy bledzie
            {
                alert('ERROR');
            }
        });
    });
});
</script>
[JAVASCRIPT] pobierz, plaintext 

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

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

Ten post edytował tab 1.12.2012, 02:03:29

[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.

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ę:

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

w js zmienilem to:

Kod

$('#adres').val(json['adres']);
    $('#telefon').val(json['telefon']);

[HTML] pobierz, plaintext 
<input type="text" id="name">
    <input type="text" id="adres">
    <input type="text" id="telefon">
[HTML] pobierz, plaintext 

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?

Ten post edytował webspy 1.12.2012, 10:43:23

[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 
success : function(json)
{
     alert(json);
}
[JAVASCRIPT] pobierz, plaintext 

zeby sprawdzic co w ogole zawiera json

Ten post edytował tab 1.12.2012, 11:00:50

[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

[PHP] pobierz, plaintext 
select: function(event, ui) {
    var telefon = ui.item.telefon;
    $('#telefon').val(telefon); 
    // (...) itd.
[PHP] pobierz, plaintext 

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.

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ś:

[HTML] pobierz, plaintext 
	<input type="text" id="personalia">
	<input type="text" id="adres">
	<input type="text" id="telefon">
[HTML] pobierz, plaintext 

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)

[PHP] pobierz, plaintext 
<?php
    $pdo = new PDO('mysql:polaczenie z baza);
    $stmt = $pdo->query("SELECT personalia, adres, telefon FROM tabela");
    $res = $stmt->fetchall(PDO::FETCH_ASSOC); 
    $stmt->closeCursor();
    echo json_encode($res); 
	 ?>
[PHP] pobierz, plaintext 

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?

[HTML] pobierz, plaintext 
<link rel="stylesheet" href="http://af-design.com/styles/jquery-ui-1.8.1.custom.css" type="text/css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
[HTML] pobierz, plaintext 

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

(IMG:http://webspy.strefa.pl/temp/autocomplete.jpg)

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.

Ten post edytował webspy 9.12.2012, 20:14:47