Hey Everyone,
This past week I had a scenerio where I needed to “disable” a rails select_tag if a check box on my form was clicked. To make this worse, the select boxes were dynamically created through an array so the id’s were created dynamically too. That shouldn’t make any difference in this little tutorial however.
In the title of my post is mention “observe_field”. This is how I preferred to implement this solution due to the fact I’m not a Javascript programmer, but this isn’t the path I took. I ended up using straight JS to complete this, and it was “REALLY” easy. I should mention that I’m using JRAILS to replace prototype with JQuery. I tested this on both however and it worked fine. Here’s what I did…
In my view I had two items (The checkbox and the selectbox)
<%= check_box_tag ‘lock_settings_option’, ‘1′, @checked, :id => ‘lock_settings’, :onchange => “Change()”%>
<%= select_tag( “fields[#{c}]“, options_for_select(@fields, @default.to_i), :id => “field#{c}”, :disabled => @moption, :include_blank => ‘true’, :class => ‘field_options’) %>
To get this to work I added the following Javascript to the bottom of my view (keep in mind I had these two items in a form, that’s the reason you see “mapped_fields_form” in the example. It’s also important to understand that my id’s were assigned dynamically. The area on my select_tag that says “:id => “field#{c}” is where it assigns “field1, field2, field3 etc”.
[script language="javascript"]
function Change()
{
if (document.map_fields_form.lock_settings.checked == true)
{
document.map_fields_form.field1.disabled = true;
document.map_fields_form.field2.disabled = true;
document.map_fields_form.field3.disabled = true;
document.map_fields_form.field4.disabled = true;
document.map_fields_form.field5.disabled = true;
document.map_fields_form.field6.disabled = true;
}
else
{
document.map_fields_form.field1.disabled = false;
document.map_fields_form.field2.disabled = false;
document.map_fields_form.field3.disabled = false;
document.map_fields_form.field4.disabled = false;
document.map_fields_form.field5.disabled = false;
document.map_fields_form.field6.disabled = false;
}
}
[/script]
In my controller I placed the following so the checkbox and the select box would load with the proper choice. In my case if a certain field was empty then I wanted the fields to be “enabled”, but if it wasn’t then I wanted them to be disabled.
get_preferences = Preference.find(:first)
if get_preferences.handheld_mapping.empty?
@moption = false
@checked = false
else
@moption = true
@checked = true
end
I hope this helps someone down the road. I had hard time finding a solution that would work. If someone knows how this could be implemented using observe_field I’m all ears. In addition, if you have a comment, please post it.
Thanks!
Chris
#1 by Codelucky at December 16th, 2009
I love the internet.
I had the exact same problem and wasn’t very used to javascript.
Thanks for this post.
After two days of trying, this made my day.
However my solution is a little different.
In the check_box_tag I passed the checkbox to the function in the onchange handler like this.
:onchange => doChange(this)
and reffered to the select_tag in javascript like this.
function doChange(element){
element.form.select_player.disabled = element.checked
}