HTML/Rails form only submits on reload

Question

I have a rails form to create up to 25 new objects (essays in this app) at once using a custom controller. I've written some simple jquery that hides forms 2-25 until a user clicks the button to "Add More Essays," which reveals the rest of the forms. The submit/persistence works fine after refreshing the page - and even though I've hit this error before - I'm pretty sure it's an HTML issue. HTML is not my strength, and I can't find the source of the problem. I know forms/tables can be problematic when used together as per this post. Any guidance would be great.

HTML:

    <!-- essay form -->

<%= form_tag essays_path, multipart: true do |form| %>
  <% @essays.each do |essay| %>
   <% if essay.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@essay.errors.count, "error") %> prohibited this essay from being saved:</h2>

      <ul>
      <% @essay.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>  <!-- closes @essay.errors... loop -->
   <% end %>  <!-- closes essay.errors... loop -->
      </ul>
    </div>
  <% end %>  <!-- closes @essays.each... loop -->


  <% @essays.each do |essay| %>
    <%= fields_for 'essays[]', essay do |f| %>
    <div class="field list-group-item essay-upload">

      <div class="actions col-md-6 col-md-offset-3">
          <%= submit_tag 'Upload Essay(s)', :class => 'upload-individual-essay btn btn-lg btn-primary btn-block upload-new-essays'%>
      </div>

      <table class="table">

        <thead>
          <tr>
            <% if current_user.admin? %>
            <th>Company</th>
            <% end %>
            <th>Student First Name</th>
            <th>Student Last Name</th>
            <th>Package</th>
            <th>Document</th>
            <th></th>
          </tr>
        </thead>

        <tbody>
          <tr class="essays-new-table-row">
            <% if current_user.admin? %>
            <td>
            <div class="field list-group-item">
                <div>
                  <%= f.select :company_id, options_for_select(@companies) %>
                </div>
            </div>
            </td>
            <% end %> <!-- closes current_user.admin? -->

            <td>
              <%= f.text_field :student_first_name, class: 'form-control', placeholder: 'First Name' %>
            </td>
            <td>
              <%= f.text_field :student_last_name, class: 'form-control', placeholder: 'Last Name' %>
            </td>
            <td>
                <div class="list-group-item">
                  <%= f.select :package_id, options_for_select(@packages) %>
                </div>
            </td>
            <td>
              <%= f.file_field :document, class: "essays__document" %>
            </td>
          </tr>
        </tbody>

      </table>

      <button type="button" class="btn btn-lg btn-success btn-block add-another-essay"> Add More Essays</button><br>

    </div>  <!-- <div class="field list-group-item essay-upload">  -->

    <% end %>  <!-- closes field_for -->

  <% end %>  <!-- closes second @essays.each ... -->

<% end %>  <!-- closes closes form  -->

JS:

var ready;
ready = function() {

  // FUNCTIONALITY: hide extra divs

  $(".essay-upload").hide();
  $(".essay-upload:first").show();

  // FUNCTIONALITY: reveal other forms on 'add more essays' click 

  $('.add-another-essay').on('click', function(){
    $(".essay-upload").show();  
    $('.add-another-essay').remove(); 
    $('.upload-individual-essay').hide();
    $('.upload-individual-essay:first').show();
  })

$(document).on('page:change', ready);

score 1 · Accepted Answer · answered Nov 30 '15 at 05:58

According to what I see you always show only only one (first) submit_tag, but you have 25! submit tags on the page...

What do you think about moving this submit_tag outside the loop? (@essays.each). It's not needed there (it submits top form). In this case you can avoid hiding & showing submit tag

$('.upload-individual-essay').hide();
$('.upload-individual-essay:first').show();

Place of submit tag can be set via css styles

And for my point of view it would be cleaner to understand.

HTML/Rails form only submits on reload

1 Answers1