Dynamically generate a field option from dropdown selection

I've just been doing something similar. This works, but might not be as Railsy as it could be:

<h3>Number of Tickets?</h3> <%= select :tickets, :quantity, {"1" => "1", "2" => "2"}, {:prompt => 'Select quantity...'}, {:onchange => "if(this.options [this.selectedIndex].value=='2')   {Effect.BlindDown('guest_name', {duration: 0.5}); return false;}      else   {Effect.BlindUp('guest_name', {duration: 0.5}); return false;}"} %>

<div id="guest_name" style="display:none;">   <h3>Name of guest?</h3>   <%= f.text_field :guest_name %> </div>

Notes: 1. This is not using Ajax - it is using JavaScript to show and hide a div based on a selected value. You're not fetching data, so why use Ajax to go to the server in this case? 2. You need to have Scriptaculous installed to use the effects (good idea to give feedback to the user?). If you have <%= javascript_include_tag :defaults %> in the head of your html page then Scriptaculous is good to go. 3. Even if the guest_name field is hidden, it will still be submitted, so test the value from your quantity select before saving the value from guest_name. 4. I made a small change to your select to get your prompt ('Select quantity') to work correctly. 5. Be careful with the formatting of the onchange part when copying the code here: there should be new lines before {Effect.BlindDown, else, and {Effect.BlindUp, but nowhere else.

Good luck.

Tony Tony wrote:

I even tried doing an if statement in the div: <div id="guest_name"<%= " style='hidden'" if !@tickets.quantity == '2' %>>

Okay, obviously there was a typo which when fixed ended up working.

style="display:none;" not style="hidden".

Hope this helps someone.

-Tony

Thanks Chris! I was able to get it working!

You're very welcome. I've received help here, so hope to give it when I can. And while we're talking about that, have we thanked the wonderful Fred Cheung this week? Fred: you're a gem.

Two issues I'm having with this implementation though:

First, if I go to edit the form, I can see the '2' is selected but the guest_name field is hidden until I select a different number of tickets (I guess this activates/reloads the javascript). I even tried doing an if statement in the div: <div id="guest_name"<%= " style='hidden'" if !...@tickets.quantity == '2' %>> which works (I can see this from the page source). However, the div is ALWAYS visible, until I select a different number of tickets and it acvtivates/reloads the javascript. Any ideas on how to get this to work?

Good point about the div not being visible when editing the form. I'd better go and check my own code...

Second, I ended up using a table structure for the form, wrapping the DIV around the <TR> doesn't work (the guest_name field is always visible). I'm guessing this is a table structure issue so I need to take a more in depth look.

I started off using tables for forms too, but was dissatisfied because a table is supposed to be a way of showing tabular information (i.e. rows of similar data) and most forms don't fall in that category. Tables are a pain when you want to do this kind of thing because of some browser-specific issues (Internet Explorer...). There's a discussion on Rails Forum about using css (and not tables) to lay out forms: http://railsforum.com/viewtopic.php?id=25297