如何使用JS与Ruby on Rails提交表单

我有一个使用refile gem来处理文件上传的rails项目，并且我想在用户在其文件浏览器中选择文件后提交表单。如何使用JS与Ruby on Rails提交表单

我在导轨应用程序的导航栏中创建了一个按钮，并具有以下形式。

_nav.html.erb

<div class='upload-image'> 
      <form name="form_upload_image"> 
      <p>Upload Image <i class="fa fa-upload"></i></p> 
     <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |form| %> 

       <%= form.attachment_field :tshirt_image, direct: true, class: "fa fa-upload", input_html: { hidden: true, onchange: "uploadImage()" } %> 

      <%= form.submit "Update", class: "btn btn-primary" %> 

     <% end %> <!-- form --> 
     </form> 
     </div>

我想打电话给uploadImage JS功能，一旦用户在文件浏览器中选择了Open按钮。

我创建了app/assets/javascripts看起来像下面内navbar_image_upload.js文件，

// app/assets/javascripts/navbar_image_upload.js 

function uploadImage() { 
    document.forms["form_upload_image"].submit(); 
}

然而，当我选择在文件浏览器的文件，并选择Open它不提交表单。任何帮助，将不胜感激。

来源

2016-01-15 Chris

你会更好地与一个unobtrusive pattern结合您的change方法，如使用内联JS几乎肯定会导致与代表团等问题：

#app/assets/javascripts/application.js 
$(document).on("change", "input.fa-upload", function(e){ 
    $(this).parents('form').submit(); 
});

你也最好使用正确的格式为：

<%= content_tag :div, class: 'upload-image' do %> 
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |form| %> 
     <%= form.attachment_field :tshirt_image, direct: true, class: "fa fa-upload", input_html: { hidden: true } %> 
     <%= form.submit "Update", class: "btn btn-primary" %> 
    <% end %> 
<% end %>

来源

2016-01-16 12:16:02

您确定uploadImage未被调用吗？假设它是提交父表单form_upload_image。

你可能没有打算嵌套窗体; form_for帮助程序本身呈现一个表单标记。这是你实际想要提交的表单。

你应该看看呈现的输出。您的表单元素可能比您期望的要多。

来源

2016-01-15 23:40:30 mczepiel

如何使用JS与Ruby on Rails提交表单

回答

相关问题