Hello folks,
I have this test tab set up that when you click on each button, it displays different information. I need it to retain the information when toggling back and forth between tabs. I tested this by placing inputs in 3 of the tags. Ill type something in one input filed in a tab, move on to the next tab, go back to the previous tab and the input data dissappears. I need it to keep the data populated regardless of which tab is clicked. Any help would be appreciated. Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Keith Parker (diades)" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function showData(oTab)
{
//get the display container
var oContainer = document.getElementById('tab_content');
//get the required data for display
var oDataContainer = document.getElementById(oTab.id + '_content');
//empty the display container;
oContainer.innerHTML = "";
//fill it up
oContainer.innerHTML = oDataContainer.innerHTML;
}
onload = function()
{
showData(document.getElementById('tab_0'))
return false;
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
#tab_container{
}
#tab_content{
}
button{
border-bottom:none;
}
.cls_Hidden_Text{display:none}
/*]]>*/
</style>
</head>
<body>
<div id="tab_container">
<button onclick="return showData(this)" id="tab_0">Tab 0</button>
<button onclick="return showData(this)" id="tab_1">Tab 1</button>
<button onclick="return showData(this)" id="tab_2">Tab 2</button>
<button onclick="return showData(this)" id="tab_3">Tab 3</button>
<button onclick="return showData(this)" id="tab_4">Tab 4</button>
<div id="tab_content"></div>
</div>
<div id="tab_0_content" class="cls_Hidden_Text">Div 0 content</div>
<div id="tab_1_content" class="cls_Hidden_Text">Div 1 content</div>
<div id="tab_2_content" class="cls_Hidden_Text"><input type="text"></div>
<div id="tab_3_content" class="cls_Hidden_Text"><input type="text"></div>
<div id="tab_4_content" class="cls_Hidden_Text"><input type="text"></div>
</body>
</html>