基於表單輸入字段隱藏/顯示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

回答

相關問題