title: How to create a tabbed html form with a common div
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>A simple code example would be great. Using jquery,and ajax is not a problem,</p>
  
  <p>cheers.</p>
  
  <p><strong>edit:</strong>
  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.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;script&gt;
  
    // 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 &lt; 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 &lt; tabs.length; i++){
      var obj= document.getElementById(tabs[i]);
  
      // Find the correct div
      var cldrn = obj.childNodes;
      for(var m = 0; m &lt; 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&lt; 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();
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload='aciOnload()'&gt;
  
  &lt;h1&gt;Tabbed Form&lt;/h1&gt;
  
  
  &lt;hr/&gt;
  
  &lt;div class="tabs"&gt;
    &lt;a class="tab" onclick="showTab('tab1')"&gt;Tab One&lt;/a&gt;
    &lt;a class="tab" onclick="showTab('tab2')"&gt;Tab Two&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;form name="myForm" action="#" &gt;
  
          &lt;!-- note that for the first tab we need to
               manually set the display to visible --&gt;
    &lt;div id="tab1" class="tabContent" style="display:block"&gt;
      &lt;div id="common" &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="tab2" class="tabContent"&gt;
      &lt;div id="common" &gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="submit" action="http://example.com/" method="post"&gt;
  
  &lt;/form&gt;
  
  &lt;div id="common_stuff" class="common_stuff" &gt;
      &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;Field One: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldOne" id="exfieldOne" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Field Two: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldTwo" id="exfieldTwo" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Field Three: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldThree" id="exfieldThree" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/div&gt;    
  &lt;hr&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Edit2:</strong>
  Here is the working code:</p>
  
  <pre><code>    &lt;script&gt;
  
    // 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 &lt; 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 &lt; tabs.length; i++){
      var obj= document.getElementById(tabs[i]);
  
      // Find the correct div
      var cldrn = obj.childNodes;
      for(var m = 0; m &lt; 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&lt; ccc.length; n++){
            if ( ccc[n].tagName == "TABLE"){
              var tbl = ccc[n].cloneNode(true);
              child.appendChild(tbl);
              for (r=0;r&lt;tbl.rows.length;r++){
                var row = tbl.rows[r];
                for (c=0; c&lt; row.cells.length;c++){
                  var cell = row.cells[c];
                  var inputs = cell.childNodes;
                  for (s=0;s&lt; 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();
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload='aciOnload()'&gt;
  
  &lt;h1&gt;Tabbed Form&lt;/h1&gt;
  
  
  &lt;hr/&gt;
  
  &lt;div class="tabs"&gt;
    &lt;a class="tab" onclick="showTab('tab1')"&gt;Tab One&lt;/a&gt;
    &lt;a class="tab" onclick="showTab('tab2')"&gt;Tab Two&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;form name="myForm" action="#" &gt;
  
          &lt;!-- note that for the first tab we need to
               manually set the display to visible --&gt;
    &lt;div id="tab1" class="tabContent" style="display:block"&gt;
      &lt;div id="common" &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="tab2" class="tabContent"&gt;
      &lt;div id="common" &gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="submit" action="http://example.com/" method="post"&gt;
  
  &lt;/form&gt;
  
  &lt;div id="common_stuff" class="common_stuff" &gt;
      &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;Field One: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldOne" id="exfieldOne" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Field Two: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldTwo" id="exfieldTwo" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Field Three: &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="fieldThree" id="exfieldThree" value=""/&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
   &lt;/div&gt;    
  &lt;hr&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>