index.php:
<script type="text/javascript"> $(document).ready(function() { $('#wait_0').hide(); $('#wait_1').hide(); $('#wait_2').hide(); $('#kod_pocztowy').bind("keyup change", function(e) { $('#wait_0').show(); $('#result_0').hide(); $('#result_1').hide(); $('#result_2').hide(); $.post("xxxx_test.php", { func: "postcode", postcode_var: $('#kod_pocztowy').val() }, function(response){ $('#result_0').fadeOut(); setTimeout("finishAjaxPostCode('result_0', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjaxPostCode(id, response){ $('#wait_0').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } function finishAjax_tier_three(id, response) { $('#wait_2').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script>
$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"); if($postcode == ''){ $komunikat2 ='Sprawdź błędy na stronie i je popraw:'; $errors['kod_pocztowy'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano kodu pocztowego.'; } if($city == ''){ $komunikat2 ='Sprawdź błędy na stronie i je popraw:'; $errors['miasto'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano miasta.'; } if($street == ''){ $komunikat2 ='Sprawdź błędy na stronie i je popraw:'; $errors['ulica'] = '<div style=padding-top:2px><img src=/images/alert.png></div>Błąd: Nie wpisano adresu.'; } } }
<form method="post" name="FormRegisterEnd"> <div> <div style="padding:30px;"> <div style="min-width:120px; display:inline; float:left; font-weight:bold; padding-top:8px;">*Kod pocztowy:</div> <div style="display:inline; width:400px; margin-left:30px;"> </div> <div style="width:400px; margin-top:-50px; margin-left:535px; display:inline; float:left;" id="kod_pocztowyerr"></div> </div> </div> <span id="wait_0"><img alt="czekaj" src="/images/loader.gif"/></span> <span id="result_0" style="display: none;"></span> <span id="wait_1" style="display: none; margin-left:150px;"><img alt="czekaj" src="/images/loader.gif"/></span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"><img alt="czekaj" src="/images/loader.gif"/></span> <span id="result_2" style="display: none;"></span> <div style="width:880px; margin-top:30px;"> <div style="padding:30px;"> <div style="min-width:250px; display:inline; font-weight:bold;"></div> <div style="display:inline; width:320px; margin-left:430px;"> <input type="submit" name="FormRegisterEnd" class="button" value="Zakończ"> </div> </div> </div> </form>
teraz w pliku xxxx_test.php:
$postcode_var = $_POST['postcode_var']; postcode($_POST['postcode_var']); } function postcode($postcode_var){ <div> <div style="padding:30px;"> <div style="min-width:120px; display:inline; float:left; font-weight:bold; padding-top:8px;">*Miasto:</div> <div style="display:inline; width:400px; margin-left:30px;"> <div id="suggest" style="margin-left:150px;"> <div class="suggestionsBox" id="suggestions" style="display: none; width:375px; margin-top:-3px;"> <div class="suggestionList" id="suggestionsList"></div> </div> </div> </div> <div style="width:400px; margin-top:-50px; margin-left:535px; display:inline; float:left;" id="miastoerr"></div> </div> </div> '); } city($_POST['city_var']); } function city($city_var, $postcode){ //zapytanie do bazy mysql.. <div> <div style="padding:30px;"> <div style="min-width:120px; display:inline; float:left; font-weight:bold; padding-top:8px;">*Adres (ul. i nr.):</div> <div style="display:inline; width:400px; margin-left:30px;">'); <div id="suggest2" style="margin-left:150px;"> <div class="suggestionsBox" id="suggestions2" style="display:none; position:static; width:375px; margin-top:-3px;"> <div class="suggestionList" id="suggestionsList2"></div> </div> </div>'); }else{ } </div> <div style="width:400px; margin-top:-50px; margin-left:535px; display:inline; float:left;" id="ulicaerr"></div> </div> </div>'); } adres($_POST['adres_var']); } function adres($adres_var, $postcode){ $postcode = $_POST['postcode']; //tu zapytanie do bazy... <div> <div style="padding:30px;"> <div style="min-width:120px; display:inline; float:left; font-weight:bold; padding-top:8px;">Województwo:</div> <div style="display:inline; width:400px; margin-left:30px;">'); echo '<option value="'.$pokazWoj['woj'].'" disabled="disabled" selected="selected">'.$pokazWoj['woj'].'</option>'; } </div> <div style="width:400px; margin-top:-50px; margin-left:535px; display:inline; float:left;" id="wojerr"></div> </div> </div> '); }
Zamierzenie które chcę osiągnąć to:
1 - Nie wpisano kodu pocztowego wyświetli od razu błąd bez wciskania submita zakończ.
2 . Po wpisaniu poprawnego kodu pocztowego pojawia się poniżej pole miasto (tak teraz się robi) ale jeżeli wcisnę submit "zakończ" wraca do początku tylko zapamięta w polu kod pocztowy ten kod ale nie zatrzymuje ramki z polem miasto.
3. Tak ma się tworzyć dla pozostałych pól.
Jak to działa w praktyce proszę zobaczyć tutaj: zobacz link