# Forms, javascript and ajax - hopefully an easy question

**URL:** <https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189>\
**Category:** Rails\
**Created:** [August 4, 2009, 6:24pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189 "2009-08-04T18:24:23Z")\
**Posts on this page:** 7\
**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:** [August 4, 2009, 6:24pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/1 "2009-08-04T18:24:23Z")

</div>

Right now I have a simple form hooked up. Now that the form is smooth  
and functional, I want to add a feature that I’m not sure how to  
implement.

After a user modifies a form, I’d like to have a visual cue appear  
somewhere to show that the form has been changed and needs to be  
saved.

It could be a red div at the top of the screen - anything - it is  
doesn’t matter.  
Just making it show up when “changed” and disappear when “saved” is  
what I want to do.

Thanks for the advice,

- FJM

---

<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:** [August 4, 2009, 6:25pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/2 "2009-08-04T18:25:33Z")

</div>

I should probably note that the form is hooked up with  
“remote\_form\_for” so that saving it doesn’t cause the page to reload.

On Aug 4, 12:23 pm, “removed\_email\_address@domain.invalid” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<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:** [August 4, 2009, 6:43pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/3 "2009-08-04T18:43:07Z")

</div>

On Aug 4, 5:24 pm, “Frank J. Mattia” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> > doesn’t matter.  
> > Just making it show up when “changed” and disappear when “saved” is  
> > what I want to do.

You’re going to have to do this client side, either use the  
observe\_form helper or write the equivalent javascript yourself (if  
you are using prototype look at Form.Observer and friends)

Fred

---

<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:** [August 4, 2009, 6:54pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/4 "2009-08-04T18:54:50Z")

</div>

I figured that would be my starting point however, with a very limited  
knowledge of prototype and javascript in general - its not easy to hit  
the ground running with only the docs. Any other advice you can give  
me?

On Aug 4, 12:41 pm, Frederick C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<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:** [August 4, 2009, 7:44pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/5 "2009-08-04T19:44:35Z")

</div>

ok so that takes care of when the form changes, how about submit? how  
do i know if the submit was sucessful?

On Aug 4, 1:09 pm, Frederick C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<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:** [August 4, 2009, 7:11pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/6 "2009-08-04T19:11:13Z")

</div>

On 4 Aug 2009, at 17:53, Frank J. Mattia wrote:

> I figured that would be my starting point however, with a very limited  
> knowledge of prototype and javascript in general - its not easy to hit  
> the ground running with only the docs. Any other advice you can give  
> me?

Prototype (and obviously other js frameworks) have methods for  
inserting html into other elements, in prototype you might for example  
do

$(‘header’).insert({top: ‘

Hello world

’})  
which will insert that text at the top of the element with id  
‘header’. You’d use that as the code you want evaluated when  
Form.Observer (or observe\_form etc.) decides that the form has changed.

Fred

---

<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:** [August 5, 2009, 12:15pm UTC](https://www.ruby-forum.com/t/forms-javascript-and-ajax-hopefully-an-easy-question/173189/7 "2009-08-05T12:15:38Z")

</div>

something like this?

in your controller,

respond\_to do |format|  
format.js { message = @task.update\_attributes(params[:task]) ?  
“Updated successfully” : “Update failed”  
render :update do |page|  
page.replace\_html :flash\_area, message  
#use RJS to find and hide the red div band  
end  
}  
end