2008-02-24 09:36:20 +0000
While working on a recent Ruby on Rails project, I needed to be able to check the changes in the forms that were appearing on the page and highlight those fields on change. I looked around and couldn’t really find anything I liked, so I made one.
This script is about 30 lines of code, or 594 bytes minified. What it does is provides a Prototype observer on every field of every form on your page.
It then fires off a little script that adds “changed_field” to the class of that element if the field has been changed to a value that is different to the original value when the page was loaded.
This is done by comparing the original value on page load to the new value on change.
If you want to put it in a static web page, you need to do the following:
Put the following in your HEAD tag of your web page:
1 2 3 4 5 6 7
If you don’t want to do every document on the page, you can just specify one form by it’s ID like so:
1 2 3
Reload your page and you should be working.
Ruby on Rails Integration
Then, you can either put the new FieldMonitor(‘form-id’) code in your layouts/application.html.erb file, or if you are using RJS Templates, put the following in your RJS:
page << %[new FieldMonitor('form-id');]
And all should be good.
You can download Field Monitor here.
Let me know if you find it useful!