Your markup is overly complex, as a result, my script probably is too. Really though, this sort of thing should be done server side unless cheating isn't an issue and client side javascript enabled is highly likely. Your images would look better with transparent backgrounds, that way they will blend in on all browsers:
Attachment 250 Attachment 251
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color:#ffffff;
background-color:#454545;
}
input {
text-align:right;
}
</style>
<script type="text/javascript">
function totPcent(){
var pcent=0,
pvals=document.getElementsByTagName('input');
for (var i_tem = 0; i_tem < pvals.length; i_tem++){
if (pvals[i_tem].type=='radio'&&pvals[i_tem].name.indexOf('pval')>-1&&pvals[i_tem].checked){
document.getElementsByName(pvals[i_tem].name+'T')[0].value=pvals[i_tem].value+'%'
pcent+=Math.abs(pvals[i_tem].value)
}
else if (pvals[i_tem].name=='tot')
var total=pvals[i_tem]
}
total.value=pcent+'%'
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="98%" id="AutoNumber1" height="49">
<tr>
<td width="64%" align="left" height="37">
<blockquote>
<blockquote>
<p><font face="Verdana"> <strong>Assure you can
help</strong></font></p>
</blockquote>
</blockquote>
</td>
<td width="36%" height="37">
<p align="center"><img src="y.gif">
<font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" onclick="totPcent();" name="pval1" value="75"></font></b></font> <img src="n.gif" style="position:relative;top:2px;padding-left:3ex;"><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" onclick="totPcent();" name="pval1" value="0"></font></b></font></td>
<td width="34%" height="37">
<p align="center"><input type="text" readonly name="pval1T" size="2"></td>
</tr>
<tr>
<td width="64%" align="left" height="1">
<blockquote>
<blockquote>
<p><b><font face="Verdana">Fulfill the Customer's Needs</font></b></p>
</blockquote>
</blockquote>
</td>
<td width="36%" height="1">
<p align="center"><img src="y.gif">
<font face="Verdana"><b><font color="#FFFFFF">
<input type="radio" onclick="totPcent();" name="pval2" value="25"></font></b></font> <img src="n.gif" style="position:relative;top:2px;padding-left:3ex;"><font face="Verdana"><b><font color="#FFFFFF"><input type="radio" onclick="totPcent();" name="pval2" value="0"></font></b></font></td>
<td width="34%" height="1">
<p align="center"><input type="text" readonly name="pval2T" size="2"></td>
</tr>
<tr>
<td width="64%" align="left" height="1">
<blockquote>
<blockquote>
<p><b><font face="Verdana">Total:</font></b></p>
</blockquote>
</blockquote>
</td>
<td width="36%" height="1">
<p align="center"></td>
<td width="34%" height="1">
<p align="center"><script type="text/javascript">
document.write('<input type="text" readonly name="tot" size="'+(window.opera? 3 : 2)+'">')
</script></td>
</tr>
</table>
</body>
</html>
Percentage Calculator
Reply With Quote
Bookmarks