How to show or hide the next div based on form field input

I have a form with many divs inside. Each div is categorized and has various fields to be filled up by the user. I want开发者_StackOverflow to have a flow here so that the user can fill the fields in the second div only after filling the fields in the first div. In short show the second div after filling the fields in the first div and so on.

I tried using the following code:

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

and the div starts like this:

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

But haven't got any success with this. Can anyone help me with this?

---

Here is the sample:

<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>

---

How about using a form wizard plugin (look in the bottom right corner for the demo)?

---

Ok try this... I posted a 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>

Script

$(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;
}

---

You can use an id selector

$("#form1")

If you need a class selector then you have to use

$("div.myclass input")

So your code will be something like this

$("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
 });

Edit

From your markup it looks like you have to change

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

to

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