PDA

View Full Version : Multiple event handlers

-i-dont-know-
03-02-2006, 03:05 PM
Hi, I have a problem.
I've got some code that i've written and when I add one event handler to a radio box tag everything works as it should. But when I add a second it stops working :(
Here is the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html/javascript; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="EN-GB">
<link rel="stylesheet" type="text/css" href=".css">
<title>simple document</title>
<script src="paycalc.js" type="text/javascript"></script>
</head>


<body>

<form>
<input type="radio" name="cost" value="none" onFocus="i=0" Checked >None
<br>
<input type="radio" name="cost" value="add10" onFocus="i=i+10;" onBlur="i=i-10;"> +10
<br>
<input type="radio" name="cost" value="minus10" onFocus="i=i-10;">-10
<br>
<input type="button" name="show" value="Price" onClick="total()">
</form>
</body>

</html>

The -10 works as it only has the onfocus handler but the +10 works when it only has onfocus but stops working when I add the onblur aswell. How can I get it working with both handlers?

Here is the paycalc.js code aswell:

var i = 0
function total() {alert (i)}

Thanks in advance
Jon Hanlon
03-03-2006, 07:59 PM
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onblur.asp
As of Microsoft Internet Explorer 5, you must set the tabIndex attribute of elements that expose the onblur event.

But every time that the element loses focus it undoes the focus handler.
Is this what you want??
-i-dont-know-
03-04-2006, 03:59 AM
Thanks for the reply,
Yes I do want that the blur to undo the focus handler. I tested this script in FF so I don't know if the link you gave would work.
coothead
03-04-2006, 06:12 AM
Hi there -i-dont-know-,

I may,of course, have completely misunderstood your problem
- ( bald headed old farts are often slow on the uptake :supereek: ) -
but this is how I would have approached it...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simple document</title>
<meta http-equiv="Content-Type" content="text/html/javascript; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="EN-GB">
<link rel="stylesheet" type="text/css" href=".css">

<script type="text/javascript">
<!--
function total(frm) {
for(i=0;i<frm.cost.length;i++) {
if(frm.cost[i].checked==true) {
alert(frm.cost[i].value);
}
}
}
//-->
</script>

</head>
<body>

<form action="#">
<input type="radio" name="cost" value="0" checked="checked" ><label>None</label><br />
<input type="radio" name="cost" value="+10"><label>+10</label><br />
<input type="radio" name="cost" value="-10" ><label>-10</label><br/>
<input type="button" name="show" value="Price" onclick="total(this.form)">
</form>

</body>
</html>
-i-dont-know-
03-05-2006, 06:09 AM
You've almost got it coothead. I'm just learning javascript so I don't know the best way to go about making what I want but here it is:
I want a variable (eg. i) and this is the total cost of all the checkboxes added together. It is displayed at the bottom of the page. An example is here:
http://www.alienware.com/Configurator_Pages/Area-51_5500_r3.aspx?SysCode=PC-AREA51-5500-R3&SubCode=SKU-DEFAULT
You see as the checkboxes change so does the total cost, and it happens realtime.
Any ideas? Thanks.
coothead
03-05-2006, 07:38 AM
Hi there -i-dont-know-,

try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simple document</title>
<meta http-equiv="Content-Type" content="text/html/javascript; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="EN-GB">
<link rel="stylesheet" type="text/css" href=".css">

<script type="text/javascript">
<!--

var total=100;
var inp=document.getElementsByTagName('input');

function init() {
for(i=0;i<inp.length;i++) {
if(inp[i].type=='radio') {
inp[i].onclick=function() {
num=parseFloat(this.value)
document.forms[0][7].value=total+num;
}
}
}
}

onload=init;
//-->
</script>

</head>
<body>

<form action="#">
<input type="radio" name="cost" value="0" checked="checked" ><label> None</label><br />
<input type="radio" name="cost" value="10"><label> +10</label><br />
<input type="radio" name="cost" value="-10" ><label> -10</label><br />
<input type="radio" name="cost" value="30"><label> +30</label><br />
<input type="radio" name="cost" value="-50" ><label> -50</label><br />
<input type="radio" name="cost" value="100"><label> +100</label><br />
<input type="radio" name="cost" value="-25" ><label> -25</label><br />
<input type="text" value="100" readonly="readonly"><label> total</label><br />
</form>

</body>
</html>
-i-dont-know-
03-05-2006, 03:22 PM
Thanks for the reply coothead, is there anyway that the script can be made so that the when checked, the boxes subtract from the current total instead of the set number (100)? eg. when you click -10 it subtracts 10 from the current total instead of 100? Thanks again.
coothead
03-05-2006, 03:48 PM
Hi there -i-dont-know-,

I feel that we are getting close to the final solution. :loopy:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simple document</title>
<meta http-equiv="Content-Type" content="text/html/javascript; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="EN-GB">
<link rel="stylesheet" type="text/css" href=".css">

<script type="text/javascript">
<!--

function init() {

df=document.forms[0].total;
inp=document.getElementsByTagName('input');

for(i=0;i<inp.length;i++) {
if(inp[i].type=='radio') {
inp[i].onclick=function() {
num=parseFloat(this.value);
df.value=parseFloat(df.value)+num;
}
}
}
}
onload=init;

//-->
</script>

</head>
<body>

<form action="#">
<input type="radio" name="cost" value="0" checked="checked" ><label> None</label><br />
<input type="radio" name="cost" value="10"><label> +10</label><br />
<input type="radio" name="cost" value="-10" ><label> -10</label><br />
<input type="radio" name="cost" value="30"><label> +30</label><br />
<input type="radio" name="cost" value="-50" ><label> -50</label><br />
<input type="radio" name="cost" value="100"><label> +100</label><br />
<input type="radio" name="cost" value="-25" ><label> -25</label><br />
<input type="text" name="total"value="0" readonly="readonly"><label> total</label>
</form>

</body>
</html>
-i-dont-know-
03-05-2006, 04:42 PM
I feel that we are getting close to the final solution. :loopy:

Thanks for all the help coothead :D I modified your most recent help and got what I wanted :) Here is the final result:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simple document</title>
<meta http-equiv="Content-Type" content="text/html/javascript; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="EN-GB">
<link rel="stylesheet" type="text/css" href=".css">

<script type="text/javascript">
<!--

function init() {

df=document.forms[0].total;
inp=document.getElementsByTagName('input');

for(i=0;i<inp.length;i++) {
if(inp[i].type=='radio') {
inp[i].onclick=function() {
num=parseFloat(this.value);
df.value=parseFloat(df.value)+num;
}
}
}
}
onload=init;

//-->
</script>

</head>
<body>
<h2>Price Calculator (Chocolate bars)</h2>
<span style="font-weight: bold;">Do you want:</span>
<form action="#">
Nuts?<br />
<input type="radio" name="cost" value="10" checked="checked"><label> Yes +10</label><br />
<input type="radio" name="cost" value="-10" ><label> No -10</label><br />
Black or white chocolate?<br />
<input type="radio" name="cost2" value="30"><label>Black +30</label><br />
<input type="radio" name="cost2" value="-30" checked="checked"><label>White -30</label><br />
Fruit bits?<br />
<input type="radio" name="cost3" value="20"><label>Yes +20</label><br />
<input type="radio" name="cost3" value="-20" checked="checked"><label>No -20</label><br />
<p style="display: inline;">&pound;</p><input type="text" name="total"value="50" readonly="readonly"><label> total</label>
</form>
</body>
</html>

Thanks again ;)
coothead
03-05-2006, 05:04 PM
No problem, you're welcome. :loopy: