# Form Field Observer - AJAX?

**URL:** <https://www.ruby-forum.com/t/form-field-observer-ajax/74435>\
**Category:** Rails\
**Created:** [November 7, 2006, 10:08am UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435 "2006-11-07T10:08:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![deniedlates](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@deniedlates](https://www.ruby-forum.com/u/deniedlates)\
**Post date:** [November 7, 2006, 10:08am UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435/1 "2006-11-07T10:08:07Z")

</div>

Hi,

I have a form that contains two input fields used for a calculation.  
When either one of these fields changes values, a

 is updated with  
the sum of these two fields. Right now, I am using observe\_form to call  
an action in my controller that performs the calculation. An RJS  
template takes care of replacing my 
 with the new sum.

However, I want to change this approach so I am not making an AJAX  
request to the server whenever the form is updated. I’d almost rather  
have a “Calculate” button that will instantly perfrom the calculation  
and update my

 without a server request. What is the best way to  
do this? Do I need to write a custom javascript function to grab the  
form data and parse it? Are there Rails helpers or RJS statements that  
will do this?

Thanks in advance for any help.

Brandon

---

<div class="post-metadata">

**Author:** ![deniedlates](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@deniedlates](https://www.ruby-forum.com/u/deniedlates)\
**Post date:** [November 7, 2006, 12:01pm UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435/2 "2006-11-07T12:01:20Z")

</div>

This is untested, but from the API something like:

observe\_form ‘my\_form’, :function =\> ‘recalulate()’

And define your recalculate method in a javascript file, eg  
application.js.

function recalculate() {  
var value1 = Number($F(‘field\_one’)) || 0;  
var value2 = Number($F(‘field\_two’)) || 0;  
return value1 + value2;  
}

You probably don’t need to observe the entire form though, you may be  
able  
to save some events by just observing the two fields you care about.

-Jonathan.

---

<div class="post-metadata">

**Author:** ![deniedlates](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@deniedlates](https://www.ruby-forum.com/u/deniedlates)\
**Post date:** [November 7, 2006, 9:17pm UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435/3 "2006-11-07T21:17:49Z")

</div>

Jonathan V. wrote:

> This is untested, but from the API something like:
> 
> observe\_form ‘my\_form’, :function =\> ‘recalulate()’
> 
> And define your recalculate method in a javascript file, eg  
> application.js.
> 
> function recalculate() {  
> var value1 = Number($F(‘field\_one’)) || 0;  
> var value2 = Number($F(‘field\_two’)) || 0;  
> return value1 + value2;  
> }
> 
> You probably don’t need to observe the entire form though, you may be  
> able  
> to save some events by just observing the two fields you care about.
> 
> -Jonathan.

Jonathan,

Thanks for your help… I was able to write the recalculate function  
like you said. However, once I return the sum from the function, I am  
having trouble displaying it on the page. I have :update =\>  
‘display\_sum’ as a parameter to my observe\_form function, but the  
display\_sum

 is not being updated with the sum. Am I doing  
something wrong?

---

<div class="post-metadata">

**Author:** ![deniedlates](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@deniedlates](https://www.ruby-forum.com/u/deniedlates)\
**Post date:** [November 8, 2006, 1:31am UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435/4 "2006-11-08T01:31:03Z")

</div>

Brandon S. wrote:

> > var value2 = Number($F(‘field\_two’)) || 0;
> 
> Thanks for your help… I was able to write the recalculate function  
> like you said. However, once I return the sum from the function, I am  
> having trouble displaying it on the page. I have :update =\>  
> ‘display\_sum’ as a parameter to my observe\_form function, but the  
> display\_sum
> 
> is not being updated with the sum. Am I doing  
> something wrong?
> 
> –  
> Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).

Your custom function needs to do the actual page modification itself,  
much like the RJS would have. In fact, an easy way to implement this  
would be to use FireBug to see the RJS response of your previous  
version and then just stuff the whole thing into a function with the  
appropriate parameters replaced…

\_Kevin

---

<div class="post-metadata">

**Author:** ![deniedlates](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@deniedlates](https://www.ruby-forum.com/u/deniedlates)\
**Post date:** [November 9, 2006, 11:44am UTC](https://www.ruby-forum.com/t/form-field-observer-ajax/74435/5 "2006-11-09T11:44:12Z")

</div>

Get rid of :update =\> ‘display\_sum’ and replace it with :function =\>  
‘recalculate()’.

-Jonathan.