rails 3 combining form helpers with HTML/javascript form logic

Question

I need some advice on whether I am taking the right approach for my web form with a twist.

I have this simple model that essentially consists of 2 fields. Here's the migration for it:

 class CreateAssetAllocations < ActiveRecord::Migration def self.up create_table :asset_allocations do |t| t.string :asset_allocation t.date :effective_date t.timestamps end end end 

The only twist with this model is that asset_allocation is not just a simple string. Instead, it is a list of comma-separated values (CSVs).

However, I don't want to expose the CSV formatting to the web form used for creating new instances of the model. So my 'new' view template has the following general form:

• it uses date_select rails helper for entering the effective_date field
• It has an array of input objects for entering the individual components of the asset_allocation CSV. For these, I'm using native HTML <input> tags with callouts to jQuery validation logic to make sure that the individual elements are consistent with one another.
• I have native HTML <button> element that I've created for submitting the form. It is bound to some jQuery logic which loops through the <input> fields and packs it all into a CSV string prior to sending it to the server. Once the CSV string is ready, it calls jQuery.post() with the CSV data.

Here is my button logic for submitting the form:

<script> function okGo() { var result="" $('.classentry option:selected').each(function() { var tag = $(this).val(); var value = $(this).parent().next().val(); result += tag + ":" + value + ","; }); alert(result); $.post("<%=security_assets_path(@security)%>", { foo: result, asset_allocation: asset_allocation } ); } </script> <button onClick="return okGo();">Go</button> 

Here is the call to date_select (see below). You can see that I'm assigning the object to the asset_allocation variable. If you look at the call to $.post() above, you'll see that I try to include the asset_allocation object in the posted data but it doesn't work. The foo data goes fine but not the asset_allocation.

Enter Effective Date:<br /> <%= date_select("asset_allocation", "effective_date")%> 

The above solution works fine for sending the CSV data to the server. However, I don't know how to get access to the date_select helper data to include in the call to $.post().

Is there a different approach that I should take for this situation?

Thanks

Answer 1

I didn't get any responses to this question but I did figure it out on my own.

For starters, I was wrong to use $.post(). That function is used for posting data asynchronously with AJAX. Instead, I created a button outside my form and set it up to call $('form').submit() with the onClick event handler.

I then wrote a custom submit event handler wherein I loop through my array of select boxes and text fields to create the CSV formatted string.

Lastly, in that same submit event handler, I packaged the CSV string into a hidden text field in the form to be submitted with the same attribute name as is used in the model so that the controller can easily setup the new object.

Here is some code for anyone who might run into this in the future:

Here is the small form for submitting the asset allocation CSV and the effective_date. Notice that there is no submit button in the form itself. Also notice that there's a hidden_field element declared - this will get populated from inside the submit() handler.

<%= form_for @asset_allocation, :url => security_assets_path(@security) do |f| %> <%= f.hidden_field :asset_allocation %> Enter Effective Date:<br /> <%= f.date_select :effective_date %> <% end %> 

Here is the button declared outside the form which I use to trap the submit event and do my own processing with. It simply calls submit() on the form element.

<button onClick="return $('#new_asset_allocation').submit();">Submit</button> 

Here's where I bind my own submit() event handler when the DOM is loaded. It will call okGo() whenever the user presses the Submit button.

 $(document).ready(function() { $('form').submit(function() { okGo(); return true; }); }); 

And then finally, here is my custom submit() handler which loops through the other input elements and gathers up the information for the CSV and then puts the CSV result into the hidden_field which was declared in the form. That then gets sent to the server for the controller to handle.

 function okGo() { var result="" $('.classentry option:selected').each(function() { var tag = $(this).val(); var value = $(this).parent().next().val(); result += tag + ":" + value + ","; }); $('#asset_allocation_asset_allocation').val(result); } 

That's it, that's all. It works like a charm. Hopefully this example comes in handy for others out there.