使用javascript拦截表单提交事件

Question

我用的是Rails-6和Bootstra-4。我正在使用引导卡显示我的表单。该表单简单易懂，文本字段，文件上传和提交按钮。这是我们的出路这里是我的表单的代码：

<%= 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 (如上面的代码中)中时，事件就会按需要工作，附加的函数会在单击submit按钮时执行。

但是当我将表单提交按钮放在Bootstrap页脚中时(如下代码所示)，然后单击submit按钮，附加的函数就不会执行。

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

这是看上去的样子。移动表格提交按钮在卡片体

为什么会发生这种事？我错过了什么概念？当我单击放置在卡片页脚中的提交按钮时，如何使附加的事件列表启动？

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 (卡脚)有一个意外的关闭</form>标记。浏览器仍然通过为您关闭第一个<form>之前的</div>标记来优雅地处理这个问题，但是<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>