README

此包提供了一个额外的表单元素，可以作为 Neos.NodeTypes:Form 的替代品，通过 JavaScript 异步处理所有表单。

它遵循渐进增强的原则，并将回退到 Form 元素的默认行为。

如果您在模态对话框或手风琴中处理表单，并且常规表单会导致页面刷新，使得确认信息对用户不可见，这将特别有用。

此包向每个页面的 body 末尾添加额外的 JavaScript，以提供此功能。

此 JavaScript 不需要 jQuery，它是纯 vanilla。

兼容性

如何使用

安装

使用命令 composer require onedrop/ajaxform 将此包添加到您的 Neos 项目中作为依赖项。
（或者：下载 zip 文件并将其解压到 Packages/Application/Onedrop.AjaxForm）

Routes.yaml

不再需要修改任何 Routes.yaml，因为它已弃用。额外的 Ajax 路由现在通过 Settings.yaml 包含。

使用方法

Fusion

您可以使用 Onedrop.AjaxForm:Form Fusion 对象作为常规 Neos.NodeTypes:Form 元素的替代品，例如。

page = Page {  
  body.parts.newsletterForm = Onedrop.AjaxForm:Form {  
    formIdentifier = 'newsletter-form'  
    presetName = 'bootstrap'  
  }  
}

内容元素

此包提供了一个名为 'Ajax Form' 的内容元素，您可以用它来替代常规的 'Form' 内容元素。
最简单的方法是选择现有的表单元素，然后在所选内容元素的设置选项卡中将类型更改为 'Ajax Form'。

JavaScript

表单提交通过 vanilla JavaScript 处理。
此包会自动将必要的脚本追加到每个放置表单的 Neos.Neos:Page 的 body 末尾。

如果您使用 Grunt、Gulp 或其他构建系统，可能不需要此额外脚本，但将其包含在您的构建过程中，然后您可以通过更改 Settings.yaml 设置来删除此包含。

Onedrop:
  AjaxForm:
    includeJavascript: true

JS 事件

您可以使用 2 个事件来注册事件监听器。

在发送 Ajax 表单之前 Onedrop.AjaxForm:before

将 Ajax 表单渲染为 HTML 之后 Onedrop.AjaxForm:after

表单重新加载

由于您的表单内容被确认消息替换，您通常希望在用户看到确认信息后重置表单（以便可以再次提交表单）。

如果您在确认信息中放置一个属性 data-reset-form="1"，表单将在 5 秒后重置。

例如 myform.yaml

finishers:
  -
    identifier: 'Neos.Form:Confirmation'
    options:
      message: |
              <div class="callback-success" data-reset-form="1">
                  <h4>Thank you for your request</h4>
                  We will contact you asap.
              </div>

在上下文中使用 JavaScript

JS 也适用于通用目的，您可以将任何表单包裹在一个 div 中，以配置表单通过 Ajax 提供服务。您必须有一个控制器 URL，该 URL 仅提供您想要 Ajax 化的表单的 HTML。

<div data-ajax="ajax-form" data-ajax-uri="/some/ajax/endpoint">
    <f:form action="doSomething" method="POST">
        <!-- Form fields -->
    </f:form>
</div>