如何使用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提交表單

回答

相關問題