Nuby: How to use onKeyPress to call JavaScript?

rubyonrails-talk
1

Hi,

I'm new to rails, so please be nice to me :slight_smile:

I'm trying to do some simple JavaScript in Rails but am having a lot of difficulty getting it to work.

Basically, I have a form with a text field. When the user types in the text field, I want to respond to each key press event and update another field on the screen.

I want to do this *without* a round-trip to the server.

In straight HTML, it would look something like this:

<head> <script>   function test(textfield) {     document.all['output'].innerHTML = textfield.value.length;   } </script> </head> <body>   <form>     <input type="text" onkeyup="test(this)"/>   </form>   <span id="output"></span> </body>

I've tried many permutations of the text_field_tag and none of them seem to work as I expect. The closest I got was

<%= text_field_tag 'answer', nil, :onkeypress => "alert('asdf')" %>

but I can't seem to get it to call my own javascript function.

i.e. this doesn't work <%= text_field_tag 'answer', nil, :onkeypress => "test(this)" %>

Is what I'm trying to do even possible?

2

Have you tried using another function name besides "test." Initially this confused me too, but then I thought maybe "test" is a keyword in JavaScript so I tried something else and it seems to work just fine.

Craig User wrote:

3

Try this function: http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper.html#M001636 It "observes" a field in the form and calls a callback function, ajax functions by default.

You must include prototype library too. Use the helper <%= javascript_include_tag :defaults %>

4

Thank you all for your help. I was able to get this working by doing the following:

<%= observe_field 'answer', :function => "getStyle($F('answer'))", :frequency => 1 %>

and then in my application.js

function getStyle(answer) {     var styleField = document.getElementById('style');     styleField.innerHTML = answer }

In the interests of DRY though, does anyone know how to pass in a non-form variable to my javascript function so that I don't have to do the document.getElementById lookup?

i.e. getStyle($F('answer'), $P('otherElement'))

I guess I'm asking if there's a 'page' equivalent to the 'form' shorthand "$F".

5

Have you looked at <http://prototypejs.org/api/utility&gt; ?