Menu
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!
[url]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>