如何基於表單域輸入顯示或隱藏下一個div

Question

我有一個內部有很多div的窗體。每個div都被分類並且具有由用戶填寫的各個字段。我想在這裏有一個流程，以便用戶填充第一個div中的字段後才能填充第二個div中的字段。總之顯示第一個div填充字段後的第二個div等等。

我嘗試使用下面的代碼：

$("div.form1 input").each(function() { 
    if (this.value == "") 
    ("div.form2").eq(1).hide(); 
    else 
    ("div.form2").eq(1).show(); 
}); 

和DIV開始是這樣的：

<div class="myclass" id="form1"> 

但沒有得到任何與此成功。誰能幫我這個？

Answer 1

如果你需要一個類選擇，那麼你必須使用

$("div.myclass input") 

所以你的代碼會是這樣的

$("div.myclass input").each(function() { 
    if (this.value == "") 
    $("div.form2").eq(1).hide(); // if form2 is your class 
    else 
    $("div.form2").eq(1).show(); // if form2 is your class 
}); 

您可以使用一個ID選擇

$("#form1") 

編輯

從您的標記，它看起來像你必須改變

$("div.form2").eq(1).hide(); 

到

$("div.ui-tabs-panel").eq(1).hide(); 

Answer 2

下面是示例：

<form name="Myform" method="post" action="" id="Myform"> 
    <div id="container-1"> 
    <ul class="nav"> //this part is used to create the tabs for each div using jquery 
     <li class="ui-tabs-selected"><a href="#fragment-1"><span>One</span></a></li> 
     <li class=""><link to "#fragment-2"><span>Two</span></a></li> //unable to post a tags 
     <li class=""><link to "#fragment-3"><span>Three</span></a></li> 
     <li class=""><link to "#fragment-4"><span>Four</span></a></li> 
     <li class=""><link to "#fragment-5"><span>Five</span></a></li> 
     <li class=""><link to "#fragment-6"><span>Six</span></a></li> 
    </ul> 

    <!-- Form 1 --> 
    <div class="ui-tabs-panel" id="fragment-1"> 
     <div class="form_item"> 
    ................... 
    </div> 
     <div class="form_item"> 
    ................... 
    </div> 
    </div> 

<!-- Form 2 --> 
    <div class="ui-tabs-panel ui-tabs-hide" id="fragment-2"> 
     <div class="form_item"> 
    ................... 
    </div> 
     <div class="form_item"> 
    ................... 
    </div> 
    </div> 

<!-- Form 3 --> 
    <div class="ui-tabs-panel ui-tabs-hide" id="fragment-3"> 
     <div class="form_item"> 
    ................... 
    </div> 
     <div class="form_item"> 
    ................... 
    </div> 
    </div> 

    </div> 
</form> 

Answer 3

如何使用form wizard插件（看在演示的右下角）？

---

好吧試試這個......我發佈了demo here。

HTML

<form name="Myform" method="post" action="" id="Myform"> 
<div id="container-1"> 

<ul class="nav"> <!-- this part is used to create the tabs for each div using jquery --> 
    <li class="ui-tabs-selected"><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li><a href="#fragment-3"><span>Three</span></a></li> 
    <li><a href="#fragment-4"><span>Four</span></a></li> 
    <li><a href="#fragment-5"><span>Five</span></a></li> 
    <li><a href="#fragment-6"><span>Six</span></a></li> 
</ul> 
<!-- Form 1 --> 
<div id="fragment-1"> 
    <div class="error"></div> 
    <div class="form_item"> 
    .......Form 1............ 
    <br /><input type="checkbox" /> #1 Check me! 
    </div> 
    <div class="form_item"> 
    ................... 
    </div> 
</div> 

<!-- Form 2 --> 
<div id="fragment-2"> 
    <div class="error"></div> 
    <div class="form_item"> 
    .......Form 2............ 
    <br /><input type="checkbox" /> #2 Check me! 
    </div> 
    <div class="form_item"> 
    ................... 
    </div> 
</div> 

<!-- Form 3 --> 
<div id="fragment-3"> 
    <div class="error"></div> 
    <div class="form_item"> 
    .......Form 3............ 
    <br /><input type="checkbox" /> #3 Check me! 
    </div> 
    <div class="form_item"> 
    ................... 
    </div> 
</div> 

</div> 
</form> 

腳本

$(document).ready(function(){ 
$('#container-1').tabs({ 
    select: function(event, ui) { 
    var currentIndex = $('#container-1').tabs('option', 'selected') + 1; 
    var currentFragment = $($('.ui-tabs-selected').find('a').attr('href')); 
    // Clear Error Message 
    $('.error').html(''); 
    // Allow moving backward 
    if (ui.index < currentIndex) return true; 
    // form validation returning true or false 
    if (validate(currentFragment) && currentIndex == ui.index) return true; 
    $('.error').html('Please complete appropriate section(s) before continuing to this tab'); 
    return false; 
    } 
}); 
// This makes sure the first tab is selected (in case the URL ends with something like "#fragment-4") 
$('#container-1').tabs('select', 0); 
}) 

function validate(el){ 
if (el.find(':checkbox').is(':checked')) return true; 
return false; 
}