基于表单输入字段隐藏/显示div

-2

我有一个高级搜索div，其中有5个表单输入字段。这个div默认是隐藏的，它是搜索表单的一部分。当用户从结果页面返回到此页面时，我想让div显示假设填充了5个字段中的任何一个。基于表单输入字段隐藏/显示div

的HTML是

<a class="toggle-link" onclick="ShowDiv('Adv');">+ show advanced fields</a> 

    <div id="Adv" class="slide hidden"> 
    <form> 
    <input type="text" name="first_name"> 
    <input type="text" name="last_name"> 
    <input type="text" name="street"> 
    <input type="text" name="town"> 
    <input type="text" name="country"> 
    </form> 
    </div> 

<a onclick="ShowDiv('Basic');">- hide advanced fields</a>

是隐藏/现有的jQuery代码显示的div是：

function HideDiv() { 
     $('.slide').hide(); 
    } 
    function ShowDiv(ctrl) { 
     HideDiv(); 
     $('#' + ctrl).show(); 
    } 
    ShowDiv('Basic');

来源

2012-03-22 gek

那么你的问题是什么？ – Sparky 2012-03-22 15:06:56

当输入发生变化时，您是否应该听取事件，然后查看value.length是否为5？ ans将其设置为显示：block？ – 2012-03-22 15:08:19

好吧，我的代码似乎不起作用 – gek 2012-03-22 15:08:21

如果你想在页面加载检查你的表单输入元素这些都包含在div（即id为'Adv'），那么您应该在文档准备事件中运行您的支票

$(function(){ 
    $("div#Adv input").each(function(){ 
     if($(this).val()!='') 
      $(this).parent().parent().show(); // 1st parent is form, 2nd parent is Adv div 
      return;      
    }); 
});

小提琴是here。

只有当您的任何输入在页面加载时填充（包含数据）时，这才会起作用。

在您的问题已更新后，我已更新我的小提琴here。

来源

2012-03-22 15:47:40

这就是我正在寻找，但似乎并不幸运。我的页面包含表单中的5个字段中的一些数据，但div显示隐藏的 – gek 2012-03-22 15:54:57

切换链接我不认为需要进行更改，因为它现在正在破碎。我认为你提交的第一个代码没有它，它确实对我有意义，但不幸的是，即使输入字段填充了一些值，该div仍然隐藏.... – gek 2012-03-22 16:07:08

这是一个工作http://jsfiddle.net/VBS4E/6 /。 – 2012-03-22 16:17:22

基于表单输入字段隐藏/显示div

回答

相关问题