Отключите кнопку отправки, если file_field_tag ​​не является нулевым в Ruby on Rails

Question

У меня есть форма, и в этой форме есть тег submit_tag и поле файла. Пока пользователь не выбирает файл, кнопка отправки должна быть отключена. Когда file_field_tag ​​заполнен, кнопка должна быть включена. Каков наилучший способ сделать это?

Это мой код:

<% form_tag({:action => 'match'}, {:multipart => true, :id => 'file_form_id'}) do %>


       <%= file_field_tag 'file', :size => 500%></p>

       <%= submit_tag 'Submit' -%>


<% end -%>

Заранее спасибо!

Answer 1

Я бы использовал jQuery (или просто js), чтобы связать обработчик события «change» с file_field_tag.Используйте функцию jQuery .val () для file_field_tag, чтобы проверить, присутствует ли файл.Пример кода ниже:

  <%= form_tag(import_substitutions_path, :method => :post, multipart: true) do %>
    <%= file_field_tag 'file-field' %>
    <%= submit_tag "Import CSV", disabled: true, id: 'csv-import-submit' %>
  <% end %>

<script>
  var csvField = $('#file-field');
  var submitButton = $('#csv-import-submit');
  $(csvField).change(function() {
    var fileValue = $(csvField).val();
    if ( fileValue.empty() )  {
      $(submitButton).attr("disabled", true);
    } else {
      $(submitButton).attr("disabled", false);
    }
  })
</script>

Я мог бы также предложить альтернативное решение простого добавления опции required: true в file_field_tag:

<%= file_field_tag 'file-field', required: true %>

Answer 2

Я знаю, что это не отвечает на ваш вопрос, но вот как я решил ту же проблему. Я проверяю наличие файла в методе контроллера, который его использует:

def import
  if params[:file].nil?
    redirect_to some_model_url, alert: "CSV document not present."
  else
    ModelName.import(params[:file])
    redirect_to some_model_url, notice: "Model Name collection imported."
  end
end

Answer 3

Вам нужно будет сделать это на стороне клиента с помощью JavaScript. Сначала установите отключенную кнопку, затем используйте метод на стороне клиента, который запускается при изменении поля ввода. Метод проверяет наличие значения и включает кнопку. Я бы использовал ненавязчивый JS через JQuery.