如何用普通的div创建一个带标签的html表单 [英] How to create a tabbed html form with a common div
本文介绍了如何用普通的div创建一个带标签的html表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个html选项卡式表单，其中每个命名选项卡都有一个公用的在常见div中定义的公共输入集。当提交被击中时，我想要返回所有选项卡的所有输入。如果未勾选未选中的复选框，这不成问题。
每个输入都需要一个基于标签名称的唯一ID。我已经尝试了几种方法，但似乎无法正确使用它。
一个简单的代码示例非常棒。使用jQuery和ajax不是问题，
欢呼。
编辑：
将输入复制/附加到选项卡内容div中正确的div。我想通过将它们与选项卡名称结合来更改输入的名称和ID。
以下是代码：
<脚本>
//更多hackery，列出标签div
var tabs = [tab1，tab2];
var currenttab ='';
function showTab（tab）{
//确保所有选项卡都隐藏
（i = 0; i< tabs.length; i ++） {
var obj = document.getElementById（tabs [i]）;
obj.style.display =none;
}
//显示我们感兴趣的'one'标签
obj.style.display =block;
函数aciOnload（）{
//获取我们感兴趣的标签
var objs = [];
for（var i = 0; i< tabs.length; i ++）{
var obj = document.getElementById（tabs [i]）;
//找到正确的div
var cldrn = obj.childNodes;
for（var m = 0; m
if（cldrn.item（m）.id ==common）
{
//将常用内容复制到标签
var child = cldrn.item（m）;
child.innerHTML ='';
child.innerHTML + = document.getElementById（common_stuff）。innerHTML;
eval（child）;
var inputs = child.childNodes;
//更改输入名称
// ***注意：有3个未定义的childNode ***
（var n = 0; n< inputs.length; （inputs.item（n）.tag =='input'）{
inputs.item（n）.id = tabs [i] +'_'+ inputs.item（n ++）{
if N）.ID;
inputs.item（n）.name = tabs [i] +'_'+ inputs.item（n）.name;
}
}
break;
$ b //运行我们的加载程序
// if（typeof aciOnload =='function'）aciOnload（）;
< / script>
< / head>
< body onload ='aciOnload（）'>
< h1>标签页< / h1>
< hr />
< div class =tabs>
< a class =tabonclick =showTab（'tab1'）>标签一< / a>
< a class =tabonclick =showTab（'tab2'）>标签页2< / a>
< / div>
< form name =myFormaction =＃>
<！ - 请注意，对于第一个标签，我们需要
手动将显示设置为可见 - >
< div id =tab1class =tabContentstyle =display：block>
< div id =common>
< / div>
< / div>
< div id =tab2class =tabContent>
< div id =common>
< / div>
< / div>
< input type =submitaction =http://example.com/method =post>
< / form>
< div id =common_stuffclass =common_stuff>
< table>
< tr>
< td>字段一：< / td>
< td>< input type =textname =fieldOneid =exfieldOnevalue =/>< / td>
< / tr>
< tr>
< td>栏位二：< / td>
< td>< input type =textname =fieldTwoid =exfieldTwovalue =/>< / td>
< / tr>
< tr>
< td>字段三：< / td>
< td>< input type =textname =fieldThreeid =exfieldThreevalue =/>< / td>
< / tr>
< / table>
< / div>
< hr>
< / body>
Edit2：
这是工作代码：
< script>
//这里有点破解
//只列出标签内容divs
var tabs = [tab1，tab2];
var currenttab ='';
function showTab（tab）{
//确保所有选项卡都隐藏
（i = 0; i< tabs.length; i ++） {
var obj = document.getElementById（tabs [i]）;
if（tabs [i] == tab）{
var currenttab = obj;
}
obj.style.display =none;
}
//显示我们感兴趣的标签
currenttab.style.display =block;
函数aciOnload（）{
//获取我们感兴趣的标签
for（var i = 0; i< tabs.length; i ++）{
var obj = document.getElementById（tabs [i]）;
//找到正确的div
var cldrn = obj.childNodes;
for（var m = 0; m
if（cldrn [m] .id ==common）
{
//将普通内容复制到标签
var child = cldrn [m];
var cc = document.getElementById（common_stuff）;
var ccc = cc.childNodes;
//收集并克隆表
（var n = 0; n
var tbl = ccc [n] .cloneNode（true）;
child.appendChild（tbl）;
for（r = 0; r
for（c = 0; 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;
$ b //运行我们的加载程序
// if（typeof aciOnload =='function'）aciOnload （）;
< / script>
< / head>
< body onload ='aciOnload（）'>
< h1>标签页< / h1>
< hr />
< div class =tabs>
< a class =tabonclick =showTab（'tab1'）>标签一< / a>
< a class =tabonclick =showTab（'tab2'）>标签页2< / a>
< / div>
< form name =myFormaction =＃>
<！ - 请注意，对于第一个标签，我们需要
手动将显示设置为可见 - >
< div id =tab1class =tabContentstyle =display：block>
< div id =common>
< / div>
< / div>
< div id =tab2class =tabContent>
< div id =common>
< / div>
< / div>
< input type =submitaction =http://example.com/method =post>
< / form>
< div id =common_stuffclass =common_stuff>
< table>
< tr>
< td>字段一：< / td>
< td>< input type =textname =fieldOneid =exfieldOnevalue =/>< / td>
< / tr>
< tr>
< td>栏位二：< / td>
< td>< input type =textname =fieldTwoid =exfieldTwovalue =/>< / td>
< / tr>
< tr>
< td>字段三：< / td>
< td>< input type =textname =fieldThreeid =exfieldThreevalue =/>< / td>
< / tr>
< / table>
< / div>
< hr>
< / body>
< / html>
解决方案
我从页面中删除了常见的东西，假设你不想让它留在原地。我拒绝使用innerHTML，除了ie6 / 7修补程序。我遍历DOM查找.form属性不是未定义的元素（它不是未定义的任何类型的表单输入，当元素不在表单中时为null），并重新命名这些元素。
我没有使用jQuery。
I'm trying to create a html tabbed form where each named tab has a common set of inputs defined in a common div. When submit is hit, I'd like all the inputs from all the tabs are returned. Not a problem if unchecked checkboxes are missed.
Each input needs a unique id based on the tab name. I've tried a couple of ways, but I can't seem to get it right.
A simple code example would be great. Using jquery,and ajax is not a problem,
cheers.
edit: The inputs are copied/appended to the correct div in the tab content div. I want to change the name and id of the inputs by combining them with tab name. The children in the destination div are undefined, so I can't rename the inputs.
Here is the code:
<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: Here is the working code:
<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>
解决方案
I've removed the common stuff from the page, assuming you don't want it to stay where it is. I refuse to use innerHTML except for the ie6/7 fix. I traverse the DOM looking for elements where the .form property is not undefined (it's not undefined on any type of form input, null when the element is not in a form), and rename these appropriately.
I have not used jQuery.
这篇关于如何用普通的div创建一个带标签的html表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
