Question

如何在填充zip字段之前隐藏表单字段（城市和州）？

我正在使用基于地理位置的程序根据邮政编码自动填充城市和州，我不希望城市和州字段在数据填充之前显示。

我的html代码（仅适用于两个字段）如下。如果您需要更多我的代码，请告诉我。只是不想权衡网站。

<div class="row">
    <div class="form-left">State *</div>
    <div class="form-right"><input type="text" id="state" name="state" class="form-input" value="FL" /></div>
    <div class="form-error"></div>
</div>
<div class="row">
    <div class="form-left">Zip Code *</div>
    <div class="form-right"><input type="text" id="zip" name="zip" class="form-input" value="33574" /></div>
    <div class="form-error"></div>
</div>

Answer 1

这是使用jQuery的快速示例。 HTML - 添加和'id'到div包含输入文本和最初设置为true的隐藏属性

    <div id="stateContainer" class="row" hidden="true">
    <div class="form-left">State *</div>
    <div class="form-right"><input type="text" id="state" name="state" class="form-input" value="FL" /></div>
    <div class="form-error"></div>
</div>
<div id="zipCodeContainer" class="row">
    <div class="form-left">Zip Code *</div>
    <div class="form-right"><input type="text" id="zip" name="zip" class="form-input" value=""  /></div>
    <div class="form-error"></div>
</div>

JS

$('#zip').change(function(){
    if($('#zip').val() !== ''){
        $('#stateContainer').show();
    }
});

Answer 2

根据您提供的HTML，以下代码可以根据邮政编码输入切换字段。 jsFiddle here

 var $zip = $("#zip");
ToggleFields(); //Toggle based on initial state
$zip.on("change",function(){
    ToggleFields();
});

function ToggleFields(){        
    if($zip.val()){ //Check if there is zip code present
        if($zip.val().length != 5){
            $("#city").closest("div.row").hide();
            $("#state").closest("div.row").hide();       
        }else{
            $("#city").closest("div.row").show();
            $("#state").closest("div.row").show();  
        }
    }
}

Answer 3

在jsfiddle here

上查看

   $('#zip').change(function(){
    if($('#zip').val() !== ''){
        $('#stateContainer').show();
    }
   });

Answer 4

您可以使用模糊处理程序：

使用Javascript：

<input type="text" id="zip" name="zip" onblur="myFunction(this)" class="form-input" value="33574" />
<script>
    function myFunction(that) {
        //Zip is filled ?
        if( that.value.trim() !== '' ) {
            //Show your stuff
        }
        else {
            //hide your stuff
        }
    }
</script>

JQuery的：

// When you leave state/zip input
$('#zip').blur(function() {

    //Zip is filled ?
    if( $.trim($(this).val()) !== '' ) {
       //Show your stuff
    }
    else {
        //hide your stuff
    }

});

Answer 5

以下是使用HTML5和CSS3实现类似功能的方法。

首先是小提琴：http://jsfiddle.net/mZ26q/

标记：

<input type='text' pattern='^[0-9]{5}(-[0-9]{4})?$' id='zip' placeholder="Zip code" required />
<input type='text' id='city' placeholder="Fetching City ..." />
<input type='text' id='state' placeholder="Fetching State ..." />

CSS：

#zip:valid ~ #state,
#zip:valid ~ #city {
    display: block;
}

#zip ~ #state,
#zip ~ #city {
    display: none;
}

主要的缺点是与浏览器的兼容性（没有支持，可能是供应商前缀？等）

如何在填充zip之前隐藏表单字段（城市和州）？

5 个答案: