Open a text box when other is selected in dropdown list in rails

Question

I have a table "fundings" in which there is a field "status", for which i have a select field in the form. The options for this select field are ["approved", "declined", "pending"]. What i want is when "declined" is selected, a further text box shows to explain the reason for decline. Please help how can this be done.

<%= form_for([@parent, @child, @funding], :html => {class: "form-horizontal",role: "form"}) do |form| %>
  <div class = "form-group">
    <div class="control-label col-sm-2">
      <%= form.label :status %>
    </div>

    <% if current_user.admin? %>
      <div class="col-sm-8">
        <%= form.select :status,['Pending', 'Approved', 'Declined'], class: "form-control" %>
      </div>
    <% else %>
      <!-- Disabled for non-admin users -->
    <% end %>
  </div>

  <!-- Submit button here -->
<% end %>

Update

     <div class="form-group">
  <%= "Status" %>
  <%= form.select :status, ['Pending', 'Approved', 'Declined'], {}, id: "sample-status-select", class: "form-control" %>
</div>
<div class="form-group">
  <%= "Decline Reason" %>
  <%= form.text_area :decline_reason, class: "form-control hidden", id: "decline-reason-textarea" %>
</div>
      </div> 
      <div class="form-group">
        <div class="col-sm-10">
          <%= form.submit "Apply", class: 'btn btn-primary btn-lg' %>
        </div>
      </div>
    </div>
  </div>

    <% end %>
<script type="text/javascript">
  <plain>
  $(function() {
    $("#sample-status-select").on("change", function() {
      var select_val = $(this).val();
      console.log(select_val);
      if (select_val === 'Declined') {
        $("#decline-reason-textarea").removeClass("hidden");
      } else {
        $("#decline-reason-textarea").addClass("hidden");
        $("#decline-reason-textarea").val("");
      }
    });
  });
  </plain>
</script>

Answer 1

<script type="text/javascript">
  $(function() {
    $("#sample-status-select").on("change", function() {
      var select_val = $(this).val();
      console.log(select_val);
      if (select_val === "Declined") {
        $("#decline-reason-textarea").removeClass("hidden");
      } else {
        $("#decline-reason-textarea").addClass("hidden");
        $("#decline-reason-textarea").val("");
      }
    });
  });
</script>

Answer 2

$(function() {
  $("#sample-status-select").on("change", function() {
    var select_val = $(this).val(); // this gets the value of the dropdown menu
    console.log(select_val); // this just displays the selected value in the browser console (if you have the browser console open)

    if (select_val === 'Declined') {
      // if the 'Declined' option is chosen
      // we remove the 'hidden' class from the textarea
      $("#decline-reason-textarea").removeClass("hidden");
    } else {
      // if any other option is chosen
      // we put back the 'hidden' class to the textarea
      // also, we update the textarea value to BLANK (this part is optional, it depends if you want to keep the value of the textarea)
      $("#decline-reason-textarea").addClass("hidden");
      $("#decline-reason-textarea").val("");
    }
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="https://httpbin.org/post" method="post">
  Status
  <select id="sample-status-select">
    <option value="Pending">Pending</option>
    <option value="Approved">Approved</option>
    <option value="Declined">Declined</option>
  </select>
  <br>
  <br> Decline Reason
  <textarea id="decline-reason-textarea" class="hidden">
  </textarea>
</form>

Check this snippet I made. It should work for you as well.
This is a basic html form so this works even without ruby on rails.
After you get the gist of this, you should be able to port for it to work with your rails app.