CODEWITHSUNDEEP
ruby-on-railshaml
Abhijeet Kharkar
Abhijeet Kharkar

Reputation: 73

If Else in HAML to check the value of a "select" box

= form_tag questions_path, :method=>:post do
    = label :question, :type, 'Type: '
    = select :question, :type, %w(Text Picture Audio Video), :id=> :question_type_combo
      **- if :question_type_combo.selected != 'Text'**
        = label :question,:url, 'URL: '
        = text_field :question,:url, :id=> :question_url_text
      = submit_tag 'Add Question',:id=>:add_question_button

Is something of this sort possible in HAML? I wish to render the textfield only for certain options if selected in the SELECT BOX above.

Upvotes: 0

Views: 2229

Answers (2)

max
max

Reputation: 102164

Yes and no. You can write a conditional based on the values of the record that you bind to the form: 

= form_for @question do |f|
   = f.label :type
   = f.select, :type, %w(Text Picture Audio Video), id: 'question_type_combo'
   - unless f.object.question_type_combo === 'Text'
      = f.label :url
      = text_field :url, id: 'question_url_text'

But this would only change the visibility after the user submits the form and not be very useful.

Instead you can just use jQuery to create an event handler for the ´change´ event.

$(document).on('change','#question_type_combo', function(){
   var type = $(this).first(':selected').val();
   var $other_input = $('#other_input');
   if (type == 'Text') {
     $other_input.hide();
   } else {
     $other_input.show();
   }
});

// sets the initial state
// if you are using turbolinks
$(document).on('page:load', function(){
  $('#question_type_combo').trigger('change');
});

// if you are not using turbolinks 
$(function(){
  $('#question_type_combo').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="field">
    <label>Type</label> 
    <select name="question[question_type_combo]" id="question_type_combo">
       <option>Text</option>
       <option>Something else</option>
    </select>
  </div>
  <div class="field" id="other_input">
    <label>URL</label> 
    <input type="text" name="question[url]">
  </div>
</form>

Upvotes: 1

Asmita
Asmita

Reputation: 183

- if :question_type_combo.selected != 'Text' This is not possible in the haml view, If you want to do something based on selected option you have to use js.

Or you may set the selected option using similar code if you have controller objects:

= select_tag("fee_discount", options_for_select(Fee.discounts.keys.map {|k| [k.titleize, k]}, selected: "#{"rewards" if @vendor.present? && @vendor.approved?}"), include_blank: true)

Or

You may keep the label and text_field inside a div with hide class. And then using javascript you may hide unhide the div.

Upvotes: 0

Related Questions