JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
</head>
<body>
<h1>Tabbed Form</h1>
<hr/>
<div class="tabs">
<a class="tab" onclick="tabs.show('tab1')">Tab One</a>
<a class="tab" onclick="tabs.show('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">
This is tab 1
<div class="common_area">
</div>
</div>
<div id="tab2" class="tabContent">
This is tab 2
<div class="common_area">
</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>
<!-- scripts in body are executed on document ready -->
<script type="text/javascript">
var tabs = (function () {
// More hackery, list the tab divs
var tabs = ["tab1", "tab2"],
domTabs = [],
commonStuff,
obj,
cldrn,
child,
currentPrefix,
show,
i,
j;
// Recursively iterate through node children and rename form elements
function renameNodes(node) {
var i;
if (node.length) {
for (i = 0; i < node.length; i += 1) {
renameNodes(node[i]);
}
} else {
// rename any form-related elements
if (typeof node.form !== 'undefined') {
node.id = currentPrefix + '_' + node.id;
node.name = currentPrefix + '_' + node.name;
// Assume...