Capturing rails form submit url with javascript

Question

I'm using a rails form to submit an image to a carrierwave uploader.

<p class="sidebar-title">UPLOAD IMAGE</p>
<%= form_for :page_image, :url => {:controller => :menus, :action => :create_image}, :html => {:multipart => true, :id => "image-upload-form"} do |f| %>
<ul>
<li class="sub-heading">Choose Image</li>
    <li><%= f.file_field :image %></li>
<li class="sub-heading" style="text-align: center; width:50%; margin: 1.5em 25%">OR<br></li>
<li class="sub-heading">Image URL</li>
    <li><%= f.text_field :remote_image_url %></li></ul>

    <ul>
<li class="description"><%= f.radio_button :authored, "true" %>
<%= f.label :authored, "I am the author of this image and give permission for Gastromica to use it.", :value => "true" %></li>
<li class="description"><%= f.radio_button :authored, "false" %>
<%= f.label :authored, "This image is licenced to be freely be used and shared cormercially. If attribution is required please type a url in the box below.", :value => "false" %></li>

<li class="sub-heading">Attribution / Source URL</li>
    <li><%= f.text_field :attribution %></li></ul><ul>
    <%= f.hidden_field :user_id, :value => "1" %>

    <% @attributes.each do |attr| %>
    <%= hidden_field_tag attr[0], attr[1]%>
    <% end %>

  <li><%= f.submit "Submit Image", :class => "image-upload" %></li>
<% end %>

Because the user is uploading an image I would like to display. Something that just says the upload is in progress. So wrote the following javascript for that:

('.image-upload').click(function() {
            $(this).parents('.content').html('<p class="description" >Please wait, currrently uploading image...</p>')
        });

This works perfectly well in Safari but in any other browser it prevents the form submission from taking place and the image never uploads. Everything also seems to be running fine without the script in all browsers. Is there a way I can capture the submit form url and force it to submit after I display the image loading message?

Answer 1

Return true , as you would do in a submit handler, like this:

('.image-upload').click(function() {
        $(this).parents('.content').html('<p class="description" >Please wait, currrently uploading image...</p>')
        return true;
    });