JS Handlers problem [Archive]

Click to See Complete Forum and Search --> : JS Handlers problem

H.Prins

02-12-2003, 11:49 PM

Hello,

I am new to javascript and am now trying to master some of the syntax.

I have fabricated the following script:

-code----------------------------------------

<html>
<head>
<title></title>

<script language="JavaScript">
function colorPreview(sender, receiver) {
eval("pollForm." + receiver + ".style.backgroundColor=" + "pollForm." + sender + ".value");
}
</script>

</head>
<body>

<form name="pollForm" method="POST" action="">
<input type="text" name="input1" size="7" MAXLENGTH=7 style="width: 120">
<input type="text" name="input2" size="20" style="width: 20">
<input type="button" value="Submit" name="B1" onClick="colorPreview('input1', 'input2')">
</form>

</body>

</html>

-code----------------------------------------

As you can see there is an onClick handler that calls the function: colorPreview()
and populates the variables "sender" and "receiver" in this function.

The function then, in its turn, constructs the action to change the backgroundColor
of an input field called : "input2".

I want to however execute this function as someone is typing in the "input1" field (or even better: as the value of input1 changes).

I've tried to find handlers for this in several dictionaries on the web, but have had no luck yet.

I come from a background of PHP and Flash.... In flash for example we can create listeners to monitor
an object, in order to take action if aspects about that object change. So I am wondering if there are
similar methods in JavaScript.....

If anyone could point me into the direction of a solution that would be greatly appreciated.

Regards,
Hans Prins
HPrins@xgn.nu

skriptor

02-13-2003, 05:02 AM

Hi,
try something like this (works in IE):

<html>
<head>
<title></title>
<script language="JavaScript">
function colorPreview(sender, receiver) {
var sColor = "#000000";
if ( event.keyCode == 13 ) return; //enter-key
if( event.keyCode == 8 ) { // backspace
if(pollForm[ sender ].value.length > 1 ) {
sColor = "#" + pollForm[ sender ].value.substr( 0, pollForm[ sender ].value.length - 1 ) + "000000";
}
} else {
sColor = "#" + pollForm[ sender ].value
+ String.fromCharCode( event.keyCode ) + "000000";
}
sColor = sColor.substr( 0, 7 )
eval("pollForm." + receiver + ".style.backgroundColor='" + sColor +"'");
}
</script>
</head>
<body>
<form name="pollForm" method="POST" action="">
<input type="text" name="input1" size="7" MAXLENGTH=7 style="width: 120" onkeydown="colorPreview('input1', 'input2')">
<input type="text" name="input2" size="20" style="width: 20">
<input type="button" value="Submit" name="B1" onClick="colorPreview('input1', 'input2')">
</form>
</body>
</html>

Todo: Cursor-keys, Delete-key, key-validation
I think, your submit-key solution is much easier.
Good luck, skriptor

H.Prins

02-13-2003, 06:39 AM

Hi :) and thx for you reply,

I've tinkered with the code a bit:

-code------------------------------------------
<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form name="pollForm" method="POST" action="">
<input type="text" name="input1" size="7" MAXLENGTH=7 style="width: 120" onKeyUp="colorPreview('input1', 'input2', pollForm.input1.value)">
<input type="text" name="input2" size="20" style="width: 20"><br>
<input type="button" value="Submit" name="B1" onClick="colorPreview('input1', 'input2', pollForm.input1.value)">
</form>

</body>

</html>
-code------------------------------------------

Right now it calls the colorPreview Function on every keyUp action. But he function only executes its main actions if the string equals a character length of 7.

So that part of the handling is taken care of, I however have one more problem to deal with......

A valid hex value can only contain: 0-9 and a-f or A-F.

Anyone know how I can best check my hexValue variable to see if it is within those limits?

thx,
Hans

H.Prins

02-13-2003, 07:22 AM

a friend of mine solved the porblem :) :

<script language="JavaScript">

</script>

This does the trick....