CODEWITHSUNDEEP
ruby-on-rails
MeritonAliu
MeritonAliu

Reputation: 33

Displaying different divs based on dropdown selection in Rails form

I am trying to create a form in Rails that includes a dropdown menu with three options: 'foo', 'bar', and 'baz'. If the user selects one of these options, I want to display a different div based on the selected option.

Here is my code:

<% options = [['Foo', 'foo'], ['Bar', 'bar'], ['Baz', 'baz']] %>

<%= form.label :type %>
<%= form.select :type, options_for_select(options, @selected_type), name: 'type' %>


<% if @selected_type == 'foo' %>
  <div>
    <%= form.hidden_field :type, value:'foo' %>
  </div>
<% elsif @selected_type == 'bar' %>
  <div>
    <%= form.hidden_field :type, value:'bar' %>
  </div>
<% elsif @selected_type == 'baz' %>
  <div>
    <%= form.hidden_field :type, value:'baz' %>
  </div>
<% end %>

This is in my controller:

@vendor_item = VendorItem.new
@selected_type = params[:type]
puts "Selected type: #{@selected_type}"

I have implemented this using a select element, but the form is not working as expected. When I select an option from the dropdown menu, the form is not being submitted, and the divs are not being displayed.

Upvotes: 2

Views: 341

Answers (1)

abhiskush
abhiskush

Reputation: 48

CASE 1: If the form should be submitted on the server side, after the dropdown change:

<% options = [['Foo', 'foo'], ['Bar', 'bar'], ['Baz', 'baz']] %>

<%= form_with url: "your URL goes here", class: 'test_submit_form' do |form| %>
  <%= form.label :type %>
  <%= form.select :type, options_for_select(options, @selected_type), name: 'type' %>

  <% if @selected_type == 'foo' %>
    <div>
      <%= form.hidden_field :type, value:'foo' %>
    </div>
  <% elsif @selected_type == 'bar' %>
    <div>
      <%= form.hidden_field :type, value:'bar' %>
    </div>
  <% elsif @selected_type == 'baz' %>
    <div>
      <%= form.hidden_field :type, value:'baz' %>
    </div>
  <% end %>

  <%= form.submit %>
<% end %>

Javascript:

<script>
  $('#type').on('change', function(){
    $('form.test_submit_form').submit();
  });
</script>

CASE 2: If you just need to show/hide DIVs on client side, after dropdown change:

<% options = [['Foo', 'foo'], ['Bar', 'bar'], ['Baz', 'baz']] %>

<%= form_with url: "your URL goes here", class: 'test_submit_form' do |form| %>
  <%= form.label :type %>
  <%= form.select :type, options_for_select(options, @selected_type), name: 'type' %>
  
  <div class="option-container foo" style="display: <%= @selected_type == 'foo' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'foo' %>
  </div>

  <div class="option-container bar" style="display: <%= @selected_type == 'bar' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'bar' %>
  </div>

  <div class="option-container baz" style="display: <%= @selected_type == 'baz' ? 'block' : 'none'%>">
    <%= form.hidden_field :type, value:'baz' %>
  </div>

  <%= form.submit %>
<% end %>

Javascript:

<script>
  $('#type').on('change', function(){
    $('.option-container').hide();
    $('.option-container.' + $(this).val()).show();
  });
</script>

Notice the option-container and option (foo, bar, baz) class on div and controller code will remain the same for both cases:

@selected_type = params[:type]

Upvotes: 2

Related Questions