Using a clickable div to submit a simple_form in Rails

Question

I've got this div that I'd like to be able to click on to submit a simple_form in Rails 4.

<div id="submit-form" class="bottom-nav-box" style="width: 66.6%;">
  <div class="center-wrapper">
    <div style="display: inline-block;">
      <div class="bottom-nav-box-content" style="float: right">
        <%= f.submit 'Submit' %>
      </div> 
    </div>
  </div>  
</div>

The idea is that I want to get the "submit-form" div to submit the form when clicked, rather than have a tiny button in the middle of it that says 'Submit'.

I was thinking something along the lines of wrapping the entire thing in <%= link_to f.submit do %> but that doesn't work at all.

Is there any way I can do this?

Any help is greatly appreciated. Thanks

Answer 1

You'll be best using Javascript for this:

#app/assets/javascripts/application.js
$(document).on("click", "#submit-form", function() {
   $("#form").submit();
});

The caveat here is that you'll need a valid HTML form (as demonstrated below) which you can invoke the "submit" function for:

#view
<%= form_tag your_path do %>
   <%= ... tags ... %>
   <%= submit_tag %>
<% end %>

--

You must remember that Rails is back-end; JS is front-end. You can't call "front end" functionality with Rails directly (its exactly the same as PHP) - you'll have to use JS to bind events in the DOM to any event you wish to call on the backend

You must also be aware that Rails' primary task is to render HTML on the front-end. In the backend, it will do all the amazing ruby-based magic; but the front-end only renders HTML. This means you have to ensure you're able to send the required data / functionality within the confines of the HTML spec