Question

如果验证表单中的某些内容，我该如何显示元素？

以下是我的一些代码：

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";
       }

    }

 }

当验证邮政编码时，我想显示City div，但我不知道如何。

情况是这样的：用户必须输入他/她的有效邮政编码，一旦验证，隐藏的div将出现并在提供的文本字段中显示相应的城市。

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

当帖子的返回为空时，您将显示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");
}

    });

});

希望它可以帮到你

不要忘记将city_holder设置为使用CSS隐藏

如果您想要任何其他帮助评论

Javascript：当某些内容有效时，在表单中显示元素

2 个答案: