How to show or hide the next div based on all the form fields of the previous div being filled or not!

Question

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 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?? Please!!

Answer 1

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();

Answer 2

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>

Answer 3

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

Answer 4

Thanks fudgey. That was a great demo I could ever get. But unfortunately when I do the exact thing with every bit of code similar to your demo, its not working that way. The error message doesn't show and the tabs are displayed when clicked without checking the checkbox. I have no clue.....would you mind looking deeper into it??