# Observe\_form, observe\_field, dynamic forms help please

**URL:** <https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433>\
**Category:** Rails\
**Created:** [November 28, 2006, 12:05am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433 "2006-11-28T00:05:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 28, 2006, 12:05am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/1 "2006-11-28T00:05:09Z")

</div>

Setup:

A form which initially has only one field: a 2x group of radio\_buttons.  
As the user selects options, additinal fields are added or removed.

I started with observe\_field. I was getting some very peculiar behavior  
from observe\_field and finally figured out why =\>

Observe field only works for the first click. So it’s not suitable for  
a form that reacts to user input since a user may select/unselect an  
option multiple times.

Next, I decided to use observe\_form. At first, it seemed to overcome  
the problems of observe\_field and reacted to every click of the  
radio\_button. But then I discovered that it doesn’t observe changes in  
fields that are not in the original source (the fields added by the  
user). So I’m back to ground zero.

I suppose I could build all the DOM objects from scratch and roll my  
own functions for adding/removing and call them via onclick(), but I  
was hoping to get away from some of the:

var myDiv = document.createElement(‘div’);  
var link = document.createElement(‘a’);  
link.setAttribute(‘href’, ‘somepage.php’);  
var text = document.createCreateTextNode(‘Link Name’);

link.appendChild(text);  
myDiv.appendChild(link);

in lieu of rjs goodness like:  
myElement = “

Link Name
”  
page.replace\_html :elementId, myElement

Any help appreciated

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 28, 2006, 1:21am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/2 "2006-11-28T01:21:18Z")

</div>

krunk- wrote:

> option multiple times.
> 
> page.replace\_html :elementId, myElement
> 
> Any help appreciated

You can get around the limitations of the observe\_form by stopping the  
observer just before modifying the form and then restarting it again  
after inserting the new elements.

\_Kevin

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 28, 2006, 2:59am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/3 "2006-11-28T02:59:31Z")

</div>

\_Kevin wrote:

> > a form that reacts to user input since a user may select/unselect an  
> > was hoping to get away from some of the:  
> > myElement = “
> > 
> > Link Name
> > ”  
> > page.replace\_html :elementId, myElement
> > 
> > Any help appreciated
> 
> You can get around the limitations of the observe\_form by stopping the  
> observer just before modifying the form and then restarting it again  
> after inserting the new elements.
> 
> \_Kevin

Thank you, Kevin.

After some googling, mailing list searching, etc. I found two vague  
references to functions that might be appropriate here: Event.stop()  
and stopObserving(). I’m not completely sure how to use either of  
these.

I went to scriptaculous and read the description of stopObserving:

Event.stopObserving(element, name, observer, [useCapture]);

I looked at my page source and got:

new Form.EventObserver(‘process\_call\_form’, function(element, value)  
{new Ajax.Request(’/rails/assistant/add\_element’, {asynchronous:true,  
evalScripts:true, parameters:‘Form.serialize(process\_call\_form)=’ +  
value})})

As the observer method.

Now, element I would assume to be the id of the observed object  
(process\_call\_form). Name doesn’t seem to have a direct correlation.

> From the scriptaculous example, I think it is the action that is being  
> observed. I also assume that in the case of observe\_form it’s change.

So that gives me: Event.stopObserving(‘process\_call\_form’, ‘change’,  
observer);

My guess for observer in this case would be: Form.EventObserver. But  
I’m not sure.

And lastly, once the event has been stopped…how do you restart it?

-james

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 28, 2006, 6:29pm UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/4 "2006-11-28T18:29:49Z")

</div>

I’ll give this a little bump. I tried to pick a very simple case to  
test out rails javascript abstraction.

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 29, 2006, 2:39am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/5 "2006-11-29T02:39:33Z")

</div>

Bill W. wrote:

> > option multiple times.
> 
> I’m using observe\_field on check\_box fields to trigger rjs updates and  
> having no problem with multiple select/unselect actions. Might be able to  
> help if you provide some additional info.
> 
> Best regards,  
> Bill

Sure, the one click is for radio\_buttons only.

Here you go:  
[http://www.thoughtstoblog.com/articles/2006/10/27/observe\_field-with-radio-buttons](http://www.thoughtstoblog.com/articles/2006/10/27/observe_field-with-radio-buttons)

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [November 29, 2006, 12:33am UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/6 "2006-11-29T00:33:15Z")

</div>

Hi James,

krunk wrote:

> Observe field only works for the first click.

Could you say more about what you mean by ‘for the first click’ and what  
you  
saw that caused you to come to this conclusion?

> So it’s not suitable for a form that reacts to  
> user input since a user may select/unselect an  
> option multiple times.

I’m using observe\_field on check\_box fields to trigger rjs updates and  
having no problem with multiple select/unselect actions. Might be able  
to  
help if you provide some additional info.

Best regards,  
Bill

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [May 29, 2009, 2:21pm UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/7 "2009-05-29T14:21:52Z")

</div>

Sorry.  
Its working fine with 2 radio buttons but not for 3.

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [May 29, 2009, 2:18pm UTC](https://www.ruby-forum.com/t/observe-form-observe-field-dynamic-forms-help-please/77433/8 "2009-05-29T14:18:57Z")

</div>

Hi,

Can you please specify the in detail the observe\_field that you have  
used for 2x radio buttons??

Im also facing the same problem. My observe field is working fine for 3  
radio buttons but for 3 I dont understand hoe to make it work??

krunk- wrote:

> Setup:
> 
> A form which initially has only one field: a 2x group of radio\_buttons.  
> As the user selects options, additinal fields are added or removed.
> 
> I started with observe\_field. I was getting some very peculiar behavior  
> from observe\_field and finally figured out why =\>
> 
> Observe field only works for the first click. So it’s not suitable for  
> a form that reacts to user input since a user may select/unselect an  
> option multiple times.
> 
> Next, I decided to use observe\_form. At first, it seemed to overcome  
> the problems of observe\_field and reacted to every click of the  
> radio\_button. But then I discovered that it doesn’t observe changes in  
> fields that are not in the original source (the fields added by the  
> user). So I’m back to ground zero.
> 
> I suppose I could build all the DOM objects from scratch and roll my  
> own functions for adding/removing and call them via onclick(), but I  
> was hoping to get away from some of the:
> 
> var myDiv = document.createElement(‘div’);  
> var link = document.createElement(‘a’);  
> link.setAttribute(‘href’, ‘somepage.php’);  
> var text = document.createCreateTextNode(‘Link Name’);
> 
> link.appendChild(text);  
> myDiv.appendChild(link);
> 
> in lieu of rjs goodness like:  
> myElement = “
> 
> Link Name
> ”  
> page.replace\_html :elementId, myElement
> 
> Any help appreciated