【发布时间】：2012-03-04 01:52:38
【问题描述】：
我正在尝试创建一个 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>
编辑2： 这是工作代码：
<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>
【问题讨论】：
-
您能否展示您当前的结构，或者至少有两个标签的精简版？当您说“每个命名选项卡在公共 div 中定义了一组公共输入”时，您的意思是多个选项卡具有映射到同一个公共字段的字段吗？这似乎不符合从所有选项卡提交所有字段的要求。
-
无论您在 div 中拥有什么，无论是否隐藏都无关紧要。重要的是 元素，例如复选框、文本、隐藏等。顺便说一句，您正在寻找 jquery ui 选项卡？ jqueryui.com/demos/tabs
-
如果你把你的标签包裹在一个表单中，不就是把所有的输入都放在一个表单上吗？ stackoverflow.com/questions/169506/…
-
@nnnnn 这是带有 2 个标签的精简版。我标记了代码“注意”，显示问题所在。
-
@robert - 问题不在于 div 中的 。它是 的名称和 ID。都是一样的，我想在它们复制到目标 div 后重命名它们。