Question

我有一个包含文件字段的表单。如果用户添加文件，则表单将需要一些时间来提交。因此，我想在提交表单时禁用“提交”按钮。

我的表单如下：

<%= bootstrap_form_for(@user, html: { multipart: true }) do |f| %>
  <%= f.text_field :name, required: true, autocomplete: "name" %>
  <%= f.date_select :date_of_birth,
                    required: true,
                    include_blank: true,
                    start_year: Time.current.year - 90,
                    end_year: Time.current.year - 17
  %>

  <%= f.file_field :cv, label: "Your CV", accept:"application/pdf, 
    application/zip,application/vnd.openxmlformats-officedocument.wordprocessingml.document", placeholder: "Choose a PDF or DOC file" %>
  <%= f.hidden_field :cv_cache, id: "cv_cache" %>

  <%= f.submit "Submit application", id: "application_submit_button", data: { disable_with: "Submitting..." } %>
<% end %>

我的管道中有jquery和ujs：

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap

//= require_tree .

我在“提交”按钮上使用了data: { disable_with: "Submitting..." }选项。我的期望是，当用户单击“提交”时，该按钮被禁用，其文本变为“正在提交”。那不会发生。在for提交期间，该按钮保持活动状态，其文本保持不变。

有什么我可能想念的吗？我是否假设data: { disable_with: "Submitting..." }在提交表单时禁用了按钮，这是不正确的吗？我还需要采取什么步骤来确保禁用按钮？

更新：

如下面对答案的答复中所述，我也尝试了以下尝试，但没有任何运气：

<%= f.submit "Submit application", id: "application_submit_button", disable_with: "Submitting..." %>

更新2：

disable_with: "Submitting..."无法生成正确的标记。它生成data_disable_with而不是data-disable-with：

<input type="submit" name="commit" value="Submit application" id="application_submit_button" data_disable_with="Submitting..." class="btn btn-secondary" data-disable-with="Submit application">

data_disable_with="Submitting..."与data-disable-with="Submit application"

当我使用data: { disable_with: "Submitting..." }

时，会生成正确的标签

我已经确认JS标签已加载到标头中。

我生成的标签是：

<input type="submit" name="commit" value="Submit application" id="application_submit_button" data-disable-with="Submitting..." class="btn btn-secondary">

我仍然不知道为什么它不起作用。

Answer 1

您的代码中没有错误，它应该可以正常工作。

for提交期间，按钮保持活动状态

在我看来，某些js脚本未加载。您是否可以确保（通过使用开发人员工具或通过浏览器中的“查看页面源代码”）页面head标记包含您从application.js提及的所有脚本

<script src="/assets/rails-ujs.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/activestorage.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery3.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/popper.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-xxxxx.js?body=1" data-turbolinks-track="reload"></script>

您是否在浏览器中使用了某些脚本阻止程序扩展？

Answer 2

disable_with是您直接在“提交”按钮上指定的选项，而不是通过data属性：

<%= f.submit "Submit application", id: "application_submit_button", disable_with: "Saving..." %>

Rails 5.1：为什么在提交表单时我的“提交”按钮没有被禁用？

2 个答案: