javascript - How to submit a form using JS with Ruby on Rails -


i have rails project using refile gem process file uploading, , submit form after user has selected file in file browser.

i created button in navbar of rails app, , have following form.

_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 }) |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> 

i call uploadimage js function once user has selected open button within file browser.

i created navbar_image_upload.js file within app/assets/javascripts looks following,

// app/assets/javascripts/navbar_image_upload.js  function uploadimage() {   document.forms["form_upload_image"].submit(); } 

however, when select file in file browser , choose open it's not submitting form. appreciated.

you'll better binding change method unobtrusive pattern, using inline js going lead issues delegation etc:

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

you'll best use correct formatting form:

<%= content_tag :div, class: 'upload-image' %>     <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) |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 %> 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -