javascript - 在 file_field 的情况下填写字段名称

Question

我有一个nested_form，上面有这个表格：

  <%= f.fields_for :uploads do |file| %>
      <%= file.label 'File name :'%>
      <%= file.text_field :name, :size => "19", :id=>"field" %>    
      <%= file.file_field :file if file.object.new_record? %> 
      <p>
      <%= file.link_to_remove "Delete" %>
  <% end %>

  <%= f.link_to_add "Add", :uploads, :class=>"btn" %>

我想在用户选择一个文件（只是名称和扩展名）时填充 text_field“名称”，但我不知道如何使用 javascript 来做到这一点，因为我可以有很多 file_fields 而不仅仅是一个。

你能帮我吗 ？

Answer 1

如果你想用 JS 来做到这一点，我想出的方法基本上是在你的输入上设置一个 data 属性，其中包含你想要填充的值。

当您的视图呈现时，它将在您想要的输入中嵌入数据属性，然后在文档准备好后，您可以使用 jQuery 选择具有该特定数据属性的所有输入并设置它们的值。

在您看来：

<%= f.fields_for :uploads do |file| %>
    <%= file.label 'File name :'%>
    <%= file.text_field :name, :size => "19", :id=>"field", :data => { "for-auto-fill" => "some value" } %>    
    <%= file.file_field :file if file.object.new_record? %> 
    <p>
    <%= file.link_to_remove "Delete" %>
<% end %>

<%= f.link_to_add "Add", :uploads, :class=>"btn" %>

在您的 javascript 中：

/* Select all elements with a 'for-auto-fill' data attribute */
$('[for-auto-fill]').each(function(){
  /* For each one, set it's value to the value that you set on the data attribute */
  $(this).val(($(this).data().forAutoFill));
});

Answer 2

试试这样：

 <%= f.fields_for :uploads do |file| %>
    <%= file.label 'File name :'%>
    <%= text_field_tag :name, nil, :size => 19 %>    
    <%= file.file_field :file if file.object.new_record? %> 
    <%= file.link_to_remove "Delete" %>
  <% end %>

  <%= f.link_to_add "Add", :uploads, :class=>"btn" %>