# Simple picture form element

**URL:** <https://www.ruby-forum.com/t/simple-picture-form-element/174765>\
**Category:** Rails\
**Created:** [September 2, 2009, 12:20am UTC](https://www.ruby-forum.com/t/simple-picture-form-element/174765 "2009-09-02T00:20:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![indigoi](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/i/b3f665/32.png) [@indigoi](https://www.ruby-forum.com/u/indigoi)\
**Post date:** [September 2, 2009, 12:20am UTC](https://www.ruby-forum.com/t/simple-picture-form-element/174765/1 "2009-09-02T00:20:13Z")

</div>

I need to make a form where a user clicks on one of two pictures to  
select which option they want. After they click the picture, the  
background or possibly border of the image should change depending on  
the picture clicked. And i need to when they submit the form, i need to  
know which one they picked. What is the simplest way to do this? Will i  
need to use javascript and hidden fields, or is there an easier/better  
way to do this?

---

<div class="post-metadata">

**Author:** ![indigoi](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/i/b3f665/32.png) [@indigoi](https://www.ruby-forum.com/u/indigoi)\
**Post date:** [September 2, 2009, 12:38am UTC](https://www.ruby-forum.com/t/simple-picture-form-element/174765/2 "2009-09-02T00:38:13Z")

</div>

Richard S. wrote:

> I need to make a form where a user clicks on one of two pictures to  
> select which option they want. After they click the picture, the  
> background or possibly border of the image should change depending on  
> the picture clicked. And i need to when they submit the form, i need to  
> know which one they picked. What is the simplest way to do this? Will i  
> need to use javascript and hidden fields, or is there an easier/better  
> way to do this?

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![indigoi](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/i/b3f665/32.png) [@indigoi](https://www.ruby-forum.com/u/indigoi)\
**Post date:** [September 2, 2009, 7:37am UTC](https://www.ruby-forum.com/t/simple-picture-form-element/174765/3 "2009-09-02T07:37:09Z")

</div>

marnen,  
thanks for the response, that method only works if the image you want to  
use acts as a submit button  
[Making HTML Buttons on Forms](http://webdesign.about.com/od/htmltags/p/bltags_inputimg.htm) . Maybe i  
didn’t specify my requirements enough: i’m looking for a normal form  
element, where a user could choose between one of a few images, and if  
they selected an incorrect image, they could change their selection  
before making it final and selecting another image.

One solution i found is to use to use image tags nested in radio tag  
labels, d:

 ![](https://www.ruby-forum.com/images/male.jpg)  
 ![](https://www.ruby-forum.com/images/female.jpg)

granted this is an html solution, the underlying principal is the  
similar for rails. if anyone has any better ideas, or any different  
approaches, i’m interested to hear. Even if you have a crazy javascript  
heavy solution, at this point and time, i just want to know what my  
options are.

–  
Richard S.  
http:/www.thinkbohemian.com  
Bless anyone who reads this after midnight and before 8am

---

<div class="post-metadata">

**Author:** ![indigoi](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/i/b3f665/32.png) [@indigoi](https://www.ruby-forum.com/u/indigoi)\
**Post date:** [September 2, 2009, 12:04pm UTC](https://www.ruby-forum.com/t/simple-picture-form-element/174765/4 "2009-09-02T12:04:11Z")

</div>

Richard S. wrote:

> marnen,  
> thanks for the response, that method only works if the image you want to  
> use acts as a submit button  
> [Making HTML Buttons on Forms](http://webdesign.about.com/od/htmltags/p/bltags_inputimg.htm) .

Right. That’s what I thought you wanted.

> Maybe i  
> didn’t specify my requirements enough: i’m looking for a normal form  
> element, where a user could choose between one of a few images, and if  
> they selected an incorrect image, they could change their selection  
> before making it final and selecting another image.
> 
> One solution i found is to use to use image tags nested in radio tag  
> labels, d:

Probably a good idea. Also, I’ve seen images used in what appear to be  
 elements (such as at [http://www.ajaxspinner.com](http://www.ajaxspinner.com) ), but I’ve  
never looked at the source to figure out how.

> 

[…]

> granted this is an html solution, the underlying principal is the  
> similar for rails.

HTML is where the solution lies anyway. The Rails helpers exist only to  
facilitate the generation of HTML, not to replace it.

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid