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

您可以使用ID选择器

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

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

如何根据表单字段输入显示或隐藏下一个div

3 个答案: