Question

我正在尝试创建一个html选项卡式表单，其中每个命名选项卡都有一个公共div中定义的公共输入集。当提交被点击时，我希望返回所有选项卡中的所有输入。如果未选中未选中的复选框，则不会出现问题。

每个输入都需要基于选项卡名称的唯一ID。我尝试了几种方法，但我似乎无法做到这一点。

一个简单的代码示例会很棒。使用jquery和ajax不是问题，

欢呼声。

修改输入被复制/附加到选项卡内容div中的正确div。我想通过将它们与选项卡名称组合来更改输入的名称和ID。目标div中的子项未定义，因此我无法重命名输入。

以下是代码：

<script>

  // More hackery, list the tab divs
  var tabs = ["tab1","tab2"];
  var currenttab = '';

  function showTab( tab ){

      // Make sure all the tabs are hidden
      for(i=0; i < tabs.length; i++){
        var obj = document.getElementById(tabs[i]);
        obj.style.display = "none";
      }

      // show the 'one' tab we're interested in
      obj.style.display = "block";

  }

function aciOnload() {

  // Get the tab we're interested in
  var objs =[]; 

  for(var i = 0; i < tabs.length; i++){
    var obj= document.getElementById(tabs[i]);

    // Find the correct div
    var cldrn = obj.childNodes;
    for(var m = 0; m < cldrn.length; m++)
    {
      if(cldrn.item(m).id == "common")
      {
        // Copy the common content over to the tab
        var child = cldrn.item(m);
        child.innerHTML ='';
        child.innerHTML += document.getElementById("common_stuff").innerHTML;
        eval(child);

        var inputs = child.childNodes;
        // Change the input names
        // ***NOTE: there a 3 childNodes which are "undefined"***
        for (var n = 0; n< inputs.length; n++){            
          if (inputs.item(n).tag == 'input'){
            inputs.item(n).id= tabs[i] +'_' + inputs.item(n).id;
            inputs.item(n).name= tabs[i] +'_' + inputs.item(n).name;
          }
        }

        break;
      }
    }
  }
}
// run our loader
//    if(typeof aciOnload=='function')aciOnload();
</script>
</head>

<body onload='aciOnload()'>

<h1>Tabbed Form</h1>


<hr/>

<div class="tabs">
  <a class="tab" onclick="showTab('tab1')">Tab One</a>
  <a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>

<form name="myForm" action="#" >

        <!-- note that for the first tab we need to
             manually set the display to visible -->
  <div id="tab1" class="tabContent" style="display:block">
    <div id="common" >
    </div>
  </div>

  <div id="tab2" class="tabContent">
    <div id="common" >
    </div>
  </div>
  <input type="submit" action="http://example.com/" method="post">

</form>

<div id="common_stuff" class="common_stuff" >
    <table>
      <tr>
          <td>Field One: </td>
          <td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
      </tr>
      <tr>
          <td>Field Two: </td>
          <td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
      </tr>
      <tr>
          <td>Field Three: </td>
          <td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
      </tr>
    </table>
 </div>    
<hr>
</body>

EDIT2： 这是工作代码：

    <script>

  // this is a bit of a hack here
  // just list the tab content divs here
  var tabs = ["tab1","tab2"];
  var currenttab = '';

  function showTab( tab ){

      // Make sure all the tabs are hidden
      for(i=0; i < tabs.length; i++){
        var obj = document.getElementById(tabs[i]);
        if (tabs[i] == tab){
          var currenttab = obj;
        }
        obj.style.display = "none";
      }

      // show the tab we're interested in
      currenttab.style.display = "block";

  }

function aciOnload() {

  // Get the tab we're interested in


  for(var i = 0; i < tabs.length; i++){
    var obj= document.getElementById(tabs[i]);

    // Find the correct div
    var cldrn = obj.childNodes;
    for(var m = 0; m < cldrn.length; m++)
    {
      if(cldrn[m].id == "common")
      {
        // Copy the common content over to the tab
        var child = cldrn[m];
        var cc = document.getElementById("common_stuff");
        var ccc = cc.childNodes;
        // collect and clone tables
        for (var n = 0; n< ccc.length; n++){
          if ( ccc[n].tagName == "TABLE"){
            var tbl = ccc[n].cloneNode(true);
            child.appendChild(tbl);
            for (r=0;r<tbl.rows.length;r++){
              var row = tbl.rows[r];
              for (c=0; c< row.cells.length;c++){
                var cell = row.cells[c];
                var inputs = cell.childNodes;
                for (s=0;s< inputs.length; s++){
                  if(inputs[s].tagName == "INPUT"){
                    inputs[s].id= tabs[i] +'_' + inputs[s].id;
                    inputs[s].name= tabs[i] +'_' + inputs[s].name;
                  }
                }
              }
            }
          }
        }     

        break;
      }
    }
  }
}

// run our loader
//    if(typeof aciOnload=='function')aciOnload();
</script>
</head>

<body onload='aciOnload()'>

<h1>Tabbed Form</h1>


<hr/>

<div class="tabs">
  <a class="tab" onclick="showTab('tab1')">Tab One</a>
  <a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>

<form name="myForm" action="#" >

        <!-- note that for the first tab we need to
             manually set the display to visible -->
  <div id="tab1" class="tabContent" style="display:block">
    <div id="common" >
    </div>
  </div>

  <div id="tab2" class="tabContent">
    <div id="common" >
    </div>
  </div>
  <input type="submit" action="http://example.com/" method="post">

</form>

<div id="common_stuff" class="common_stuff" >
    <table>
      <tr>
          <td>Field One: </td>
          <td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
      </tr>
      <tr>
          <td>Field Two: </td>
          <td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
      </tr>
      <tr>
          <td>Field Three: </td>
          <td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
      </tr>
    </table>
 </div>    
<hr>
</body>
</html>

Answer 1

http://jsfiddle.net/5S7ea/

我已经从页面中删除了常见的内容，假设您不希望它保持原样。除了ie6 / 7修复，我拒绝使用innerHTML。我遍历DOM，寻找.form属性未定义的元素（在任何类型的表单输入中都没有未定义，当元素不在表单中时为null），并且适当地重命名这些元素。

我没有使用过jQuery。

Answer 2

有许多表单向导插件可能会减少你的努力。可配置的步骤选项和验证选项

示例：http://www.techlaboratory.net/products.php?product=smartwizard

Answer 3

这里是小提琴http://jsfiddle.net/RcrCJ/，你可以在其中看到有两个基于ul的标签，它们各自的div打开，所有表单都是一页本身，你可以根据你的id根据元素获取代码， demo正在使用jquery。

如何使用公共div创建选项卡式html表单

3 个答案: