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>
http://jsfiddle.net/5S7ea/
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.