update a table depending on icon click

rubyonrails-talk
1

Hi,

in a 'new' view for a persons model & controller, I want to be able to present a number of attribute options in the shape of icons. Each click on a different icon should set a given value to an attribute. For instance, if the user clicks on the icon for a "girl", I want the 'sex' attribute to be set to 'F' and the 'girl' icon to be somehow highlighted with a different border... When the user is satisfied with the options he set, he clicks on a submit button.

I don't know how to pass the icon clicks as attribute values to my controller...

Thanks

2

Sacredceltic wrote:

Hi,

in a 'new' view for a persons model & controller, I want to be able to present a number of attribute options in the shape of icons. Each click on a different icon should set a given value to an attribute. For instance, if the user clicks on the icon for a "girl", I want the 'sex' attribute to be set to 'F' and the 'girl' icon to be somehow highlighted with a different border... When the user is satisfied with the options he set, he clicks on a submit button.

I don't know how to pass the icon clicks as attribute values to my controller...

Just create hidden_field in your form and set it values from javascript (onChange).. then submit the form and construct your query with these values...

tom

3

Thank you Tom,

but how do you pass the hidden_field values to the actual record attributes from my controller @person = current_user.person.build()

Say I want to pass the value to @person.sex, for instance ?

4

Sacredceltic wrote:

Thank you Tom,

but how do you pass the hidden_field values to the actual record attributes from my controller @person = current_user.person.build()

Say I want to pass the value to @person.sex, for instance ?

in the same way as you create other forms..

<% form_for(@person) do |f|%>   <%= f.hidden_field :sex %>

then on icon you could set onClick="setSex('M', this)"

function setSex(gender, element) {    document.getElementById('person_sex').value='M';    // change class to make this selected/highlighted    this.setAttribute("class", "highlited")    // change other items    ... }

other way is to change radio buttons itself to images.. http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

5

Thank you Tom for your help. I understand the logic of modifying a hidden field now, but I am afraid there is a connection I still don't make. I am not familiar with javascript.

Where do you place the java function you defined ? In the form itself ? Is "This" the model class ? Or a div id ? I was thinking to use a "link_to_remote image_tag..." but I don't know what it should call. I don't want to execute any other controller action. I want to remain within the "new" action and just set the hidden attributes so they are saved along the others when the user click on "submit" button of the "new" form.

Thank you

6

if you're not familiar with javascript, then try the image based radio buttons, it should be more easier to implement with the standard rails way...

tom

Sacredceltic wrote: