# RJS to change image on submit button

**URL:** <https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686>\
**Category:** Rails\
**Created:** [March 23, 2008, 2:35pm UTC](https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686 "2008-03-23T14:35:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnlester](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e480ec/32.png) [@johnlester](https://www.ruby-forum.com/u/johnlester)\
**Post date:** [March 23, 2008, 2:35pm UTC](https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686/1 "2008-03-23T14:35:08Z")

</div>

Hi I have an observer that fires on the basis of a drop-down.

I need to change the icon on the submit button of a form based on this  
value. I created the submit button using “image\_submit\_tag”.

I have it working with this code in my RJS template:

if params[:type] == “type\_a”  
page.replace\_html “submit\_button”,  
‘’  
else  
page.replace\_html “submit\_button”,  
‘’  
end

I expect there is a better way to do this than having to replace the  
code generated by my image\_submit\_tag. I would rather just replace the  
image directly.

Any help/ideas appreciated…

---

<div class="post-metadata">

**Author:** ![johnlester](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e480ec/32.png) [@johnlester](https://www.ruby-forum.com/u/johnlester)\
**Post date:** [March 23, 2008, 4:23pm UTC](https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686/2 "2008-03-23T16:23:05Z")

</div>

On 23 Mar 2008, at 13:35, John L. wrote:

> page.replace\_html “submit\_button”,  
> '\<input class=“submit” src="/images/btn\_type\_a.gif" type=“image” /
> 
> > ’  
> > else  
> > page.replace\_html “submit\_button”,  
> > ‘’  
> > end

You could always just do page \<\< “$  
(‘submit\_button’).src=‘someother\_picture.gif’”;

or even page[‘submit\_button’].src= ‘someother\_picture.gif’ (which will  
result in the same output).

Fred

---

<div class="post-metadata">

**Author:** ![johnlester](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e480ec/32.png) [@johnlester](https://www.ruby-forum.com/u/johnlester)\
**Post date:** [March 23, 2008, 4:33pm UTC](https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686/3 "2008-03-23T16:33:26Z")

</div>

John L. wrote:

> if params[:type] == “type\_a”  
> page.replace\_html “submit\_button”,  
> ‘’  
> else  
> page.replace\_html “submit\_button”,  
> ‘’  
> end
> 
> I expect there is a better way to do this than having to replace the  
> code generated by my image\_submit\_tag. I would rather just replace the  
> image directly.

The following springs to mind:

page \<\< “$$(‘input.submit’)[0].src = ‘/images/btn\_#{params[:type]}.gif’”

Assuming that params[:type} always maps into the image name.

Untested, but I’ve done similar things before…

---

<div class="post-metadata">

**Author:** ![johnlester](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e480ec/32.png) [@johnlester](https://www.ruby-forum.com/u/johnlester)\
**Post date:** [March 24, 2008, 1:42pm UTC](https://www.ruby-forum.com/t/rjs-to-change-image-on-submit-button/132686/4 "2008-03-24T13:42:58Z")

</div>

Frederick C. wrote:

> or even page[‘submit\_button’].src= ‘someother\_picture.gif’ (which will  
> result in the same output).
> 
> Fred

Thanks Fred. Sometimes things are blindingly obvious 🙂 I’ve used your  
suggestion and it’s made for cheaner code. Many Thanks.