HTML/Rails表单仅在重新加载时提交

Question

我有一个rails表单，可以同时使用自定义控制器创建多达25个新对象(应用程序中的文章)。我已经编写了一些简单的jquery，它隐藏了2-25个表单，直到用户单击按钮“添加更多的文章”，这就揭示了表单的其余部分。在刷新页面之后提交/持久性工作良好--尽管我以前也碰到过这个错误--我很确定这是HTML问题。HTML不是我的优势，我也找不到问题的根源。我知道，如果按照this post一起使用表单/表，则会出现问题。任何指导都是很好的。

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

联署材料：

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);

Answer 1

根据我所看到的，你总是只显示一个(第一) submit_tag，但你有25个！在页面上提交标签..。

您认为如何将这个submit_tag移出循环？(@essays.each)。那里不需要它(它提交顶级表单)。在这种情况下，您可以避免隐藏&显示submit标记。

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

提交标记的位置可以通过css样式设置。

在我看来，更清楚的是。