使用javascript拦截表单提交事件

Question

我正在使用带有 Bootstrap-4 的 Rails-6。 我正在使用 Bootstrap Card 来显示我的表单。 表单很简单，带有标签、文本字段、文件上传和提交按钮。 here is the outout 这是我的表单的代码：

<%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>
<div class="card text-center">
  <div class="card-header">
    Add New Photo
  </div>
  <div class="card-body">
    <%= form_for @photo do |f| %>
      <%= render "shared/errors", object: @photo %>
      <%= f.hidden_field :image, value: @photo.cached_image_data %>
      <%= f.label :title %>
      <%= f.text_field :title %>
      <%= f.label :image %>
      <%= f.file_field :image %>
      <% if @photo.image_data? %>
        <%= image_tag @photo.image_url(:medium) %>
        Remove attachment: <%= f.check_box :remove_image %>
      <% end %>
      <%= f.submit %>
    <% end %>
  </div>
  <div class="card-footer text-muted">
  </div>
</div>

在我的 Javascript 包中，我使用 javascript 截获了表单提交事件。

$(document).ready(function(){
  function processForm(e) {
      if (e.preventDefault) e.preventDefault();
      alert('intercepted form submission');
      /* do what you want with the form */
      // You must return false to prevent the default form behavior
      return false;
  }

  var form = document.getElementById('new_photo');
  if (form.attachEvent) {
      form.attachEvent("submit", processForm);
      alert('attachEvent');
  } else {
      form.addEventListener("submit", processForm);
      alert("addEventListener");
  }
});

我注意到，当我将完整的表单放入 Bootstrap-Card-Body（如上面的代码中）时，事件会按需要运行，并且附加的函数会在单击提交按钮时执行。

但是当我将 Form-Submit 按钮放在 Bootstrap-Card-Footer 中时（按照下面的代码），然后单击提交按钮时附加的功能不会执行。

    <%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>
<div class="card text-center">
  <div class="card-header">
    Add New Photo
  </div>
  <div class="card-body">
    <%= form_for @photo do |f| %>
      <%= render "shared/errors", object: @photo %>
      <%= f.hidden_field :image, value: @photo.cached_image_data %>
      <%= f.label :title %>
      <%= f.text_field :title %>
      <%= f.label :image %>
      <%= f.file_field :image %>
      <% if @photo.image_data? %>
        <%= image_tag @photo.image_url(:medium) %>
        Remove attachment: <%= f.check_box :remove_image %>
      <% end %>
  </div>
  <div class="card-footer text-muted">
    <%= f.submit %>
    <% end %>
  </div>
</div>

这就是它的样子。 moved form submit button in card-body

为什么会这样？我缺少什么概念？当我单击放置在卡片页脚中的提交按钮时，如何使附加的事件侦听器触发？

Answer 1

在您示例的这一部分中：

<div class="card-body">
  <%= form_for @photo do |f| %>
  <%= render "shared/errors", object: @photo %>
  <%= f.hidden_field :image, value: @photo.cached_image_data %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.label :image %>
  <%= f.file_field :image %>
  <% if @photo.image_data? %>
    <%= image_tag @photo.image_url(:medium) %>
    Remove attachment: <%= f.check_box :remove_image %>
  <% end %>
</div>

<div class="card-footer text-muted">
  <%= f.submit %>
  <% end %>
</div>

在 Rails 完成将视图模板编译为 html 后，它会（大致）如下所示：

<div class="card-body">
  <form method="post" action="/photos" ...>
    <input ... />
    <input ... />
</div>

<div class="card-footer text-muted">
  <input type="submit" ... />
  </form>
</div>

它根本不是有效的 HTML。第一个 div (.card-body) 缺少结束 </form> 标记。但是第二个 div (.card-footer) 有一个意外的关闭 </form> 标签。浏览器仍然可以通过在第一个 </div> 之前关闭 <form> 标记来优雅地处理此问题，但 <input type="submit" ... /> 按钮将位于表单之外，因此提交按钮将不再起作用。

我建议您更改代码，如下所示。只需让<form> 标签包围您的整张卡片即可：

<%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>

<div class="card text-center">
  <%= form_for @photo do |f| %>
    <div class="card-header">
      Add New Photo
    </div>

    <div class="card-body">
        <%= render "shared/errors", object: @photo %>
        <%= f.hidden_field :image, value: @photo.cached_image_data %>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <%= f.label :image %>
        <%= f.file_field :image %>
        <% if @photo.image_data? %>
          <%= image_tag @photo.image_url(:medium) %>
          Remove attachment: <%= f.check_box :remove_image %>
        <% end %>
    </div>

    <div class="card-footer text-muted">
      <%= f.submit %>
    </div>
  <% end %>
</div>