Fog Creek Software
Discussion Board




perhaps slightly lighter fare than usual

but I can't for the life of me comprehend why this won't work:

<body>
<form action="" method="POST" id="myForm" >
<input type="text" name="myText" onKeyPress="copyval()" />
<input type="text" name="myOtherText" />

<script type="text/javascript" language="JavaScript">

function copyval() {
  myForm.myOtherText.value = myForm.MyText.value;
}

</script>
</form>
</body>

The intention is to have the value of myOtherText stay synchronized with the value in MyText as the user types into the latter field.  I've searched about google for an hour now, and I'm still unable to figure out why this seemingly simple javascript doesn't do what I expect.

muppet from madebymonkeys.net
Wednesday, June 16, 2004

The onKeyPress event expects a return value.  True to accept the keypress and false to not.

Probably what you want is not the onKeyPress event at all but rather the onChange event.  That is fired whenever the contents of the field change.

Otherwise, I think it should work.

Almost Anonymous
Wednesday, June 16, 2004

I substituted onChange for onKeyPress, and left everything else identical.  No dice.

I agree, it seems like it should work but doesn't arrggg.  :)

muppet from madebymonkeys.net
Wednesday, June 16, 2004

oh ho ho, wait a minute

it doesn't  APPEAR to work, but when I tab to the second input box in IE, suddenly my value from the first input appears there.

some sort of redraw problem?

muppet from madebymonkeys.net
Wednesday, June 16, 2004

this usually forces a redraw: form.outerHTML = form.outerHTML

mb
Wednesday, June 16, 2004

Try this:

<input type="text" name="myText" onKeyPress="copyval(); return true;" onChange="copyval();" />

You shouldn't have refresh problems -- it's never really happened to me.

Almost Anonymous
Wednesday, June 16, 2004

thanks AA, that *almost* did the trick  :)

Now it displays changes in the other input box, without tabbing, but the updates to the second text field lag one event behind.  for example, if I input 'aaaa' into the first text field, then 'aaa' will appear in the second until I tab over.

maybe this can just be chalked up to IE weirdness.

muppet from madebymonkeys.net
Wednesday, June 16, 2004

Try adding the "return true;" to the onChange line as well. 

Almost Anonymous
Wednesday, June 16, 2004

same behavior

wackiness abounds.

muppet from madebymonkeys.net
Wednesday, June 16, 2004

The reason the value appears to be one-behind is that the keypress event fires before the value gets put in the box.  This makes sense, as you can return false from that event and the keypress will be ignored.

So totally forget about the onKeyPress event.  Instead, use the onChange event and use the onBlur event.  This will mean your code will execute when the control loses focus.  That should handle everything.

Almost Anonymous
Wednesday, June 16, 2004

so... that means the other field will get updated, potentially, when I click the submit button.

nifty.

muppet from madebymonkeys.net
Wednesday, June 16, 2004

Use onKeyUp

Philo

Philo
Wednesday, June 16, 2004

D'OH

muppet from madebymonkeys.net
Wednesday, June 16, 2004

..or use onKeyUp..  I love Javascript...

Almost Anonymous
Wednesday, June 16, 2004

see if your code validates with w3c. when it does, worry about the problem I have a feeling you're not allowed javascript in an un-terminqted form element

bah humbug
Thursday, June 17, 2004

where do you see an unterminated element?

muppet is now from madebymonkeys.net
Thursday, June 17, 2004

*  Recent Topics

*  Fog Creek Home