Mam bazę danych i już jakiś tam zrobiony formularz ale jak dla mnie to jest drętwo.Co prawda formularz jest 4 etapowy, ale pokaże wam tą część w której chcę ulepszyć działanie. Może ktoś z was będzie mieć inne pomysły i pomoże usprawnić mój formularz. Ogólnie chodzi o to by użytkownik rejestrujący się nie musiał wypełniać za dużo, tylko z automatu by się wypełniało:
Ok Let's Go!:
JS:
<script> function suggest(inputString){ if(inputString.length == 0) { //wykonywanie podpowiedzi jeśli przekroczy 4 cyfry wpisanego tekstu. $('#suggestions').fadeOut(); } else { $('#miasto').addClass('load'); $.post("ajaxCitySearch.php", {queryString: ""+inputString+"", kod_pocztowy: "<?php echo ''.zabezpiecz($_POST['kod_pocztowy']).'';?>"}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#miasto').removeClass('load'); } }); } } function fill(thisValue) { $('#miasto').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 600); $.getJSON('ajaxPostCode.php', {input: thisValue}, function(data){ var inputValue=null; var WstawUlica = data.inputValue; $('input[name="ulica"]').val(WstawUlica); }); } </script>
PHP:
$city = safeEncode($_POST['miasto']); $city = mb_strtolower($city,"UTF-8"); $city = mb_ucfirst($city,"UTF-8"); $postcode = safeEncode($_POST['kod_pocztowy']); $street = safeEncode($_POST['ulica']); $street = mb_strtolower($street,"UTF-8"); $street = mb_ucfirst($street,"UTF-8"); $resultKodPocztowy = "SELECT `kod` FROM `miejscowosci_i_kody` WHERE `kod`='$postcode'" or die('zapytanie :'.$result.' blad:'.mysql_error()); $errors['kod_pocztowy'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Kod pocztowy nie istnieje.'; } if($postcode == ''){ $errors['kod_pocztowy'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano kodu pocztowego.'; } $errors['kod_pocztowy'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Podano błedny format.'; } $errors['kod_pocztowy'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Podano błednie kod pocztowy.'; } if($city == ''){ $errors['miasto'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano miasta.'; } $errors['miasto'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Podano mniej niż 3 znaki.'; } $errors['miasto'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Podano nieprawidłowe znaki.<br> Dozwolone znaki to: a-ż, A-Ż.'; } if($street == ''){ $errors['ulica'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano adresu.'; } $errors['ulica'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Podano za mało znaków.'; } } $result = "INSERT INTO DODAJE DO BAZY"; if($sql){ $komunikat3='Gratulacje! Rejestracja ukończona pomyślnie.'; $step4 = '1'; $_SESSION['step4'] = $step4; } } }
HTML:
<form method="post" name="FormRegisterEnd"> <div class="tab_registration"> <div style="padding:30px;"> <div style="display:inline; width:400px; margin-left:30px;"> <input type="text" name="kod_pocztowy" onChange="document.FormRegisterEnd.submit();" value="<?php if(isset($postcode)){print(''.zabezpiecz($_POST['kod_pocztowy']).'');}?>" style="width:350px;" class="input_search" id="kod_pocztowy"> </div> </div> </div> <div class="tab_registration"> <div style="padding:30px;"> <div style="display:inline; width:400px; margin-left:30px;"> <div id="suggest" style="margin-left:150px;"> <input type="text" name="miasto" style="width:350px;" class="input_search" id="miasto" value="<?php if(isset($city)){print(''.zabezpiecz($_POST['miasto']).'');}?>" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off"> <div class="suggestionsBox" id="suggestions" style="display: none; width:375px; margin-top:-3px;"> </div> </div> </div> </div> </div> <div class="tab_registration"> <div style="padding:30px;"> <div style="display:inline; width:400px; margin-left:30px;"> <input type="text" name="ulica" value="<?php if(isset($street)){print(''.zabezpiecz($_POST['ulica']).'');}?>" style="width:350px;" class="input_search" id="ulica" onkeyup="suggest2(this.value);" autocomplete="off"> </div> </div> </div> <div style="width:880px; margin-top:30px;"> <div style="padding:30px;"> <div style="display:inline; width:320px; margin-left:430px;"> <input type="submit" name="FormRegisterEnd" class="button" value="Zakończ"> </div> </div> </div>
Na chwilę obecną mam to zrobione tak , że po wpisaniu kodu pocztowego pobieram wartość przy pomocy:
onChange="document.FormRegisterEnd.submit();"
Następnie wartość ta jest odczytana w JS , po czym przesłana do innego pliku i utworzone zostaje zapytanie do mySQL, tu jest odebrane i wyświetlony wynik w sugestiach (w podpowiedziach) przy miasto. Do tej pory jest ok. Teraz jeśli wybiorę miasto z listy np takie które będzie miało kilka ulic odpowiadające tej miejscowości i kodzie pocztowemu to w input ulica wyświetli mi tą ulicę. Teraz chcę tu zrobić taki myk, że jeśli będzie więcej niż 1 ulica to pokaże mi select lub ewentualnie podpowiedzi tych ulic , a jak mniej niż lub równe 1 to pokaże mi zwykły input. Myślę, że zrozumieliście o co chodzi. Dodatkowo chciałbym odczytać i wstawić do formularza może być to już jako ukryte pole takie dane jak województwo , gmina powiat, oczywiście te dane znajdują się tabeli "miejscowosci_i_kody"
Liczę na waszą pomoc. Dzięki :-)