Dynamically update rails form textarea based on dropdown select

Question

I have a table called Email_Template . It contains two columns: template_name and template_body .

I also have a form in which user selects template_name in dropdown (coming from database column). In the same form, based on template_name selection, the textarea should display corresponding “template_body ” content coming from the same database table. Please tell me how to do this.

My Form

<%= form_for :email_form, :html => {:class => "form-horizontal"}, url: candidates_send_email_path do |f| %>

 <div class="form-group">
   <%= f.label :template_name, "Template" %>
      <div class="col-md-10">
         <%= select_tag "template_name", options_from_collection_for_select(Email_Template.all, "id", "id") %>
      </div>
 </div>

 <div class="form-group">
   <%= f.label :template_body, "Template Body" %>
      <div class="col-md-10">
        <%= f.text_area :email_content, rows: 7 %><br/>
      </div>
 </div>
 <div class=text-right>
   <%= f.button class: "btn btn-primary btn-modal" do %>
     SEND EMAIL <i class="glyphicon glyphicon-send"></i>
   <% end %>
 </div>

<% end %>

routes.rb

post '/template_body_finder/:template_id' => 'search#find_template'

search_controller.rb

def find_template
    @email_template = Email_Template.find(params[:template_id])
    respond_to do |format|
      format.js
    end
  end

search.js.coffee

$ ->
  $(document).on 'change', '#template_id', (evt) ->
    template_id = $(this).val()
    window.alert(template_id)
    curr_url = "/template_body_finder/" + template_id
       $.ajax({
          type: 'POST',
          url: curr_url,
          data: {'template_id': template_id},
          success: ( data, status, xhr ) -> })

find_template.js.erb

$(“#email_content”).val= <%= @email_template.template_body %>
;

Answer 1

Here try this:-

1- your form

<%= form_for :email_form, :html => {:class => "form-horizontal"}, url: candidates_send_email_path_path do |f| %>

 <div class="form-group">
   <%= f.label :template_name, "Template" %>
      <div class="col-md-10">
         <%= select_tag "template_name", options_from_collection_for_select(Email_Template.all, "id", "id") %>
      </div>
 </div>

 <div class="form-group">
   <%= f.label :template_body, "Template Body" %>
      <div class="col-md-10">
        <%= f.text_area :email_content, rows: 7 %><br/>
      </div>
 </div>
 <div class=text-right>
   <%= f.button class: "btn btn-primary btn-modal" do %>
     SEND EMAIL <i class="glyphicon glyphicon-send"></i>
   <% end %>
 </div>

<% end %>

<script type="text/javascript">
    $('#template_name').on('change', function(){
        var template_id = $(this).val();
        // alert(template_id);
        // ajax request
    $.ajax({
      url: "/template_body_finder",
      type: "GET",
      data : {
        template_id: template_id
      },
      dataType: "script",
    });
    })
</script>

2- change your url:

get '/template_body_finder' => 'search#find_template'

3- in controller -

def find_template
    @email_template = Email_Template.find(params[:template_id])
    respond_to do |format|
      format.js
    end
end

4- in your find_template.js.erb file it should like this-

$('#email_form_email_content').val("<%=@email_template.template_body%>");

this works for me, if you have any doubt you can ask in comments. thank you.