Javascript: Show element in a form when something is valid - php

Question

How can I display an element when something in a form is validated?
Here's some of my code:
signup.php
<div class="wrapper">
<div class="error-div" id="zipcode-error" ></div>
<label>Zip code:</label>
<input type="text" class="input" name="zipcode" id="zipcode" />
</div>
<!-- this div is hidden, it can only be seen when zip code is validated -->
<div class="wrapper" id="city-wrapper" >
<div class="error-div" id="city-error" ></div>
<label>City:</label>
<input type="text" class="input" name="city" id="city" >
</div>
<!-- this div is hidden, it can only be seen when zip code is validated -->
signup_validation.js
$('#zipcode').keyup(function() {
$.post('action/validate_signup.php?key=zipcode', { zipcode: $(this).val() },
function(result){
$('#zipcode-error').html(result).show("slow");
});
});
validate_signup.php
if(isset($_POST['zipcode'])){
$zip = $_POST['zipcode'];
if(empty($zip)){
echo "*Zipcode required!";
}elseif( (strlen($zip)<5) OR (strlen($zip)>5)){
echo "*Must be 5 digit!";
}elseif(!is_numeric($zip)){
echo "Must be numeric!";
}else{
$query = mysql_query("SELECT * FROM zip_codes WHERE zip = '{$zip}'");
$found_zip = mysql_num_rows($query);
if($found_zip =1){
echo "<img src='images/check.jpg' /><input type = 'hidden' name='show-city' id='show-city' />";
} else{
echo "Zip not found";
}
}
}
When zipcode is validated i want to display the City div, but i don't know how.
The situation goes like this: a user must input his/her valid zipcode, once it's validated, the hidden div will come up and display it's corresponding City on the text field provided.

Answer 1

if($found_zip =1){
echo "found||<img src='images/check.jpg' /><input type = 'hidden' name='show-city' id='show-city' />";
} else{
echo "error||error";
}
//then ur js
$('#zipcode').blur(function() {
var zip = $(this).val();
$.post('action/validate_signup.php?key=zipcode', { zipcode: zip },
function(result){
var respArr = result.split("||");
if("error" ==respArr[0]) {
$('#zipcode-error').html(result).show("slow");
}
else {
//show your hidden div here
$("#urHidden").show("slow");
}
});
});

Answer 2

When the return of the post is empty you will show the div
echo "<div id='city_holder'>No City</div>";
if(isset($_POST['zipcode'])){
$zip = $_POST['zipcode'];
if(empty($zip)){
echo "*Zipcode required!";
}elseif( (strlen($zip)<5) OR (strlen($zip)>5)){
echo "*Must be 5 digit!";
}elseif(!is_numeric($zip)){
echo "Must be numeric!";
}else{
$query = mysql_query("SELECT * FROM zip_codes WHERE zip = '{$zip}'");
$found_zip = mysql_num_rows($query);
if($found_zip =1){
$row = mysql_fetch_array($query);
echo "<div id='city_holder'>".$row['city_name']."</div>";
echo "<img src='images/check.jpg' /><input type = 'hidden' name='show-city' id='show-city' />";
} else{
echo "Zip not found";
}
}
}
$('#zipcode').keyup(function() {
$.post('action/validate_signup.php?key=zipcode', { zipcode: $(this).val() },
function(result){
if($('#city_holder').html() != 'No City')
{
$('#city').val($('#city_holder').html()); //to fill up the input
$('#city-wrapper').show("slow");//to show the div
}
else{
$('#city').val(" "); //to empty the input
$('#city-wrapper').hide("slow");//to hide the div
$('#zipcode-error').html(result).show("slow");
}
});
});
Hope it helps you
Don't forget to set the city_holder to hidden with your CSS
If you want any other help comment it