如何在Ruby on Rails中使用JS提交表單

Question

我有一個Rails項目，該項目正在使用refile gem處理文件上傳，我想在用戶在其文件瀏覽器中選擇文件后提交表單。

我在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>

用戶在文件瀏覽器中選擇“ Open按鈕后，我想調用uploadImage JS函數。

我在app/assets/javascripts創建了一個navbar_image_upload.js文件，如下所示，

// app/assets/javascripts/navbar_image_upload.js

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

但是，當我在文件瀏覽器中選擇文件並選擇“ Open它沒有提交表單。 任何幫助，將不勝感激。

Answer 1

您確定未調用uploadImage嗎？ 假設是，它將提交父表單form_upload_image 。

您可能不打算嵌套表格。 form_for helper會自己呈現一個表單標簽。 那是您實際要提交的表格。

您應該看一下渲染的輸出。 您可能有超出預期的表單元素。

Answer 2

您最好將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 %>