i am making an application on my website using javascript and html. i
have knowledge in php and html, but not much at all in javascript. the
application is split up by div tabs and inside the tabs is a list of
different links to other div tags that have radio button groups inside
them. im sure this is very basic but i want the value of the selected
radio button to be displayed in a table on that same page. so if someone select option 1, it would display option 1's value in the table at the bottom of the page. I know i could do this in php when i submit the form but I need the application to not need to refresh the page if possible. Below is a link to where i have the application and here is the code. any help is greatly
appreciated. thank you very much in advance!
http://rangoliflowers.com/tabs/yetti.html
<html>
<head>
<script type="text/javascript" src="yetii.js"></script>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:335px;
height:48px;
z-index:1;
left: 211px;
top: 106px;
}
ul li {
list-style: none;
list-style-image: url(/images/invisiblebullet.gif);
}
img {
border: 0;
}
#apDiv2 {
position:absolute;
width:587px;
height:115px;
z-index:1;
left: 199px;
top: 43px;
}
-->
</style>
</head>
<body>
<div id="apDiv2">
<div id="tab-container-1">
<ul id="tab-container-1-nav">
<li class="activeli"><a class="active" href="#tab1"></a></li>
<li class="activeli"><a class="active" href="#tab2"></a></li>
<li class="activeli"><a class="active" href="#tab3"></a></li>
<li class="activeli"><a class="active" href="#tab4"></a></li>
<li class="activeli"><a class="active" href="#tab5"></a></li>
<li class="activeli"><a class="active" href="#tab6"></a></li>
<li class="activeli"><a class="active" href="#tab7"></a></li>
<li class="activeli"><a class="active" href="#tab8"></a></li>
<li class="activeli"><a class="active" href="#tab9"></a></li>
</ul>
<!-- MAIN TABS -->
<a href="#tab1" onclick="tabber1.show(1); return false; ">tab 1</a>
<a href="#tab2" onclick="tabber1.show(2); return false;">tab 2</a>
<a href="#tab3" onclick="tabber1.show(3); return false;">tab 3</a>
<a href="#tab4" onclick="tabber1.show(4); return false;">tab 4</a>
<div class="tab" id="tab1">
<br>
<br>
<a href="#tab5" onclick="tabber1.show(5); return false;"> link to div tag 1 <br/></a>
<a href="#tab6" onclick="tabber1.show(6); return false;"> link to div tag 2 <br/></a>
<a href="#tab7" onclick="tabber1.show(7); return false;"> link to div tag 3 <br/></a>
<a href="#tab8" onclick="tabber1.show(8); return false;"> link to div tag 4 <br/></a>
<a href="#tab9" onclick="tabber1.show(9); return false;"> link to div tag 5 <br/></a>
</div>
<!-- START OF MAIN TABS -->
<div class="tab" id="tab2">
<p>this would be pretty much the same as the first tab, just different links to different radio button groups </p>
</div>
<div class="tab" id="tab3">
<p> this would be pretty much the same as the first tab, just different links to different radio button groups </p>
</div>
<div class="tab" id="tab4">
<p> this would be pretty much the same as the first tab, just different links to different radio button groups </p>
</div>
<!-- END OF MAIN TABS -->
<!-- INDIVIDUAL PART TABS -->
<!-- FIRST TAB -->
<div class="tab" id="tab5">
<form name="parts" action=" just a page to process the data " method="POST">
<br>
<br>
<input type="radio" name="1" value="option 1"> option 1<br>
<input type="radio" name="1" value="option 2"> option 2<br>
<input type="radio" name="1" value="option 3"> option 3<br>
<a href="#tab1" onclick="tabber1.show(1); return false; "> Back</a>
</div>
<div class="tab" id="tab6">
<br>
<br>
<input type="radio" name="2" value="option 1"> option 1<br>
<input type="radio" name="2" value="option 2"> option 2<br>
<input type="radio" name="2" value="option 3"> option 3<br>
<a href="#tab1" onclick="tabber1.show(1); return false; "> Back</a>
</div>
<div class="tab" id="tab7">
<br>
<br>
<input type="radio" name="3" value="option 1"> option 1<br>
<input type="radio" name="3" value="option 2"> option 2<br>
<input type="radio" name="3" value="option 3"> option 3<br>
<a href="#tab1" onclick="tabber1.show(1); return false; "> Back</a>
</div>
<div class="tab" id="tab8">
<br>
<br>
<input type="radio" name="4" value="option 1"> option 1<br>
<input type="radio" name="4" value="option 2"> option 2<br>
<input type="radio" name="4" value="option 3"> option 3<br>
<a href="#tab1" onclick="tabber1.show(1); return false; "> Back</a>
</div>
<div class="tab" id="tab9">
<br>
<br>
<input type="radio" name="5" value="option 1"> option 1<br>
<input type="radio" name="5" value="option 2"> option 2<br>
<input type="radio" name="5" value="option 3"> option 3<br>
<INPUT type="submit" value="Submit">
</form>
<a href="#tab1" onclick="tabber1.show(1); return false; "><br> Back</a>
</div>
</div>
</div>
<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'
});
</script>
<script type="text/javascript">
</script>
</body>
</html>
