Accessing elements between forms - html

Question

I am trying to access the value of an element in a different form. More specifically I have two forms, one normal html form which submits the information, and an ajax form that updates a field in the database. I want the ajax form to take the value of an element in the normal form, but I have no idea how to accomplish that. Here is my current setup:
Message View
<%= form_for #message do |f| %>
<%= f.text_field :to %>
<%= f.text_area :body %>
<%= f.submit "Send Message" %>
<% end %>
<%= form_for :save, :url => save_message_path(), :remote => :true do |f| %>
<%= f.submit "Save" %>
<% end %>
Message Controller
def save
account.message = params[:body]
end
But the :body param is in the other form so it sets account.message to nil because the ajax form did not have a body parameter. I would like it so the ajax form can submit the value of the body element.

Answer 1

Since the form is edited on the client side, you'll have to write this functionality in javascript.
It is relatively straightforward to copy the value of the message body into a hidden field and submit the Ajax form. This would be most easily accomplished by adding an id your ajax form as follows:
<%= form_for :save, :url => save_messages_path(), :remote => true, :id => 'ajaxform' %>
<%= hidden_field_tag 'hidden_message' %>
Then in javascript you could do the following:
$(document).ready(function(){
$("#ajaxform").submit(function() {
$("#hidden_message").val($("#message_body").val());
return true;
});
}

Answer 2

You can add a hidden field body in your ajax form, and use an onsubmit event to populate it with the value of the body field from the normal form before the ajax request is sent. It would look more or less like this:
<%= form_for #message do |f| %>
<%= f.text_field :to %>
<%= f.text_area :body, :class => 'main_body_field' %>
<%= f.submit "Send Message" %>
<% end %>
<%= form_for :save, :url => save_message_path(), :remote => :true, :id => 'ajax_form' %>
<%= f.hidden_field :body, :class => 'hidden_body_field' %>
<%= f.submit "Save" %>
<% end %>
javascript (with jQuery):
$(function() {
$("ajax_form").submit(function() {
// copy body value from first form to the second one
$('.hidden_body_field').val($('.main_body_field').val());
return true;
}
}