Menu
Hi, I need a form with two tabs (US & Metric). Each form has two radio buttons, a picklist and two free text fields to hold numbers. And a ‘calculate’ button on each form. The calculation takes the option chosen in the radio button (male/female) and the option chosen in the picklist to apply a constant to the two numbers and produce a result eg
If option = ‘male’ and picklist = ‘moderate’ then constant = 5. If value a = 10 and value b = 2 then the calculation = 5 * 2
Some error checking is necessary to check for valid numbers in the two free text fields and the range is valid ie between 5 and 50
Cheers, L
<i>
</i><html>
<head>
<title> Tab Calculations </title>
<script type="text/javascript">
function highlight(currentdiv) {
var tmp = 'T'+currentdiv.id.substring(1); // alert(i+'n'+tmp);
var dtmp = '';
var divs = document.getElementsByTagName("li");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == "mybox"){
dtmp = 'T'+divs[i].id.substring(1); // alert(i+'n'+tmp);
if (divs[i].id == currentdiv.id) {
divs[i].style.backgroundColor = "#ccc";
document.getElementById(tmp).style.display = 'block';
} else {
divs[i].style.backgroundColor = "#ffc";
document.getElementById(dtmp).style.display = 'none';
}
}
}
}
</script>
<style type="text/css">
.mybox {
display:block;
background:#ffc;
padding:5px;
border:1px solid red;
width:100px;
cursor:pointer;
}
.tMybox {
display:none;
border:1px solid blue;
width:558px;
height:233px;
}
/* */ #tmenu li { float:left; } /* remove for vertical menu */
</style>
</head>
<body onload="highlight(document.getElementById('P1'))">
<div id="tmenu">
<li id="P1" class="mybox" onClick="highlight(this)">USA</li>
<li id="P2" class="mybox" onClick="highlight(this)">Metric</li>
</div>
<p style="clear:both">
<div>
<div id="T1" class="tMybox"> <h2>USA Calculations</h2><p>
<input type="radio" name="RBtn0" value="0">RBtn 1
<input type="radio" name="RBtn0" value="1">RBtn 2
<p>
<select id="SBox0" name="SBox0">
<option value="">Pick</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>
Entry #1: <input type="text" id="entry00" value=""><br>
Entry #2: <input type="text" id="entry01" value="">
<p>
</div>
<div id="T2" class="tMybox"> <h2>Metric Calculations</h2><p>
<input type="radio" name="RBtn1" value="0">RBtn 1
<input type="radio" name="RBtn1" value="1">RBtn 2
<p>
<select id="SBox1" name="SBox1">
<option value="">Pick</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>
Entry #1: <input type="text" id="entry10" value=""><br>
Entry #2: <input type="text" id="entry11" value="">
<p>
</div>
</div>
<button onclick="alert('Do some sort of calculations')">Calculate</button>
</body>
</html>
[CODE]
<html>
<head>
<title> Tab Calculations </title>
<script type="text/javascript">
function highlight(currentdiv) {
var tmp = 'T'+currentdiv.id.substring(1); // alert(i+'n'+tmp);
var dtmp = '';
var divs = document.getElementsByTagName("li");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == "mybox"){
dtmp = 'T'+divs[i].id.substring(1); // alert(i+'n'+tmp);
if (divs[i].id == currentdiv.id) {
divs[i].style.backgroundColor = "#ccc";
document.getElementById(tmp).style.display = 'block';
} else {
divs[i].style.backgroundColor = "#ffc";
document.getElementById(dtmp).style.display = 'none';
}
}
}
}
function calculate()
{
var val1 = document.getElementById('entry00').value;
var val2 = document.getElementById('entry01').value;
var val3 = document.getElementById('SBox0').value;
var total = document.getElementById('Total');
for (i = 0; i < 2; i++)
{
if (document.RBtn0[i].checked == true)
{
total.value = 5 + (Number(val1) * Number(val2) * Number(val3));
}
else
{
total.value = 10 + (Number(val1) * Number(val2) * Number(val3))
}
}
}
</script>
<style type="text/css">
.mybox {
display:block;
background:#ffc;
padding:5px;
border:1px solid red;
width:100px;
cursor:pointer;
}
.tMybox {
display:none;
border:1px solid blue;
width:558px;
height:233px;
}
/* */ #tmenu li { float:left; } /* remove for vertical menu */
</style>
</head>
<body onload="highlight(document.getElementById('P1'))">
<div id="tmenu">
<li id="P1" class="mybox" onClick="highlight(this)">USA</li>
<li id="P2" class="mybox" onClick="highlight(this)">Metric</li>
</div>
<p style="clear:both">
<div>
<div id="T1" class="tMybox"> <h2>USA Calculations</h2><p>
<input type="radio" name="RBtn0" value="0" checked="checked" >RBtn 1
<input type="radio" name="RBtn0" value="1">RBtn 2
<p>
<select id="SBox0" name="SBox0">
<option value="">Pick</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>
Entry #1: <input type="text" id="entry00" value=""><br>
Entry #2: <input type="text" id="entry01" value="">
<p>
</div>
<div id="T2" class="tMybox"> <h2>Metric Calculations</h2><p>
<input type="radio" name="RBtn1" value="0" checked="checked" >RBtn 1
<input type="radio" name="RBtn1" value="1">RBtn 2
<p>
<select id="SBox1" name="SBox1">
<option value="">Pick</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>
Entry #1: <input type="text" id="entry10" value=""><br>
Entry #2: <input type="text" id="entry11" value="">
<p>
</div>
</div>
<button onclick="calculate()">Calculate</button>
<input type="text" id="Total" />
</body>
</html>
[/CODE][CODE]
var btn=document.getElementsByName("RBtn0")[0]; //or it could be [1], depending on what you're doing...
if (btn.checked)
{
total.value = 5 + (Number(val1) * Number(val2) * Number(val3));
}
else
{
total.value = 10 + (Number(val1) * Number(val2) * Number(val3))
}
[/CODE]...
I would also like to hide the calculate function on another page and link to it from this page in order to hide the calculation from a 'view source'. Is this possible or practical?
...[/QUOTE]
0.1.9 — BETA 5.18