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

【问题标题】：HTML/Rails form only submits on reloadHTML/Rails 表单仅在重新加载时提交
【发布时间】：2015-11-29 17:04:56
【问题描述】：

我有一个 Rails 表单，可以使用自定义控制器一次创建多达 25 个新对象（此应用中的文章）。我编写了一些简单的 jquery 来隐藏表单 2-25，直到用户单击“添加更多文章”按钮，这会显示其余的表单。刷新页面后提交/持久性工作正常 - 即使我之前遇到过这个错误 - 我很确定这是一个 HTML 问题。 HTML不是我的强项，也找不到问题的根源。我知道根据this 帖子一起使用时，表格/表格可能会出现问题。任何指导都会很棒。

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

【问题讨论】：

标签： jquery html ruby-on-rails forms

【解决方案1】：

据我所见，你总是只显示一个（第一个）submit_tag，但你有 25 个！在页面上提交标签...

您如何看待将此submit_tag 移到循环之外？（@essays.each）。那里不需要它（它提交顶级表单）。在这种情况下，您可以避免隐藏和显示提交标签

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

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

在我看来，它会更容易理解。

【讨论】：