Как показать или скрыть следующий div на основе ввода поля формы

Question

У меня есть форма с множеством элементов внутри. Каждый элемент делится на категории и имеет различные поля, которые должны быть заполнены пользователем. Я хочу иметь поток здесь, чтобы пользователь мог заполнять поля во втором 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

Вот образец:

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

Как насчет использования мастера форм плагина (посмотрите демо в правом нижнем углу)?

---

Хорошо, попробуйте это ... Я разместил демо здесь .

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

Answer 3

Вы можете использовать селектор идентификатора

$("#form1")

Если вам нужен селектор классов, тогда вы должны использовать

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

Редактировать

Из вашей разметки похоже, что вы должны изменить

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

на

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