TYPO3 Neos Ajax Form

AjaxForm.html

<!-- This is the HTML that is loaded by the TS AjaxForm object -->
<div{attributes -> f:format.raw()}>
	<f:if condition="{formIdentifier}">
		<f:then>
			<div data-ajax="ajax-loaded-form" data-identifier="{formIdentifier}" data-presetName="{presetName}">
				<p>Loading form please wait</p>
			</div>
		</f:then>
		<f:else>
			<p>Please select a valid Form identifier in the inspector</p>
		</f:else>
	</f:if>
</div>

AjaxFormController.php

<?php
namespace Onedrop\Solution\Controller;

/*                                                                        *
 * This script belongs to the TYPO3 Flow package "Onedrop.Solution".      *
 *                                                                        *
 *                                                                        */

use TYPO3\Flow\Annotations as Flow;
use TYPO3\Flow\Mvc\Controller\ActionController;
use TYPO3\Flow\Security\Context;

class AjaxFormController extends ActionController {


	/**
	 * @var Context
	 */
	protected $securityContext;
	/**
	 * Injects the Security Context
	 *
	 * @param Context $securityContext
	 * @return void
	 */
	public function injectSecurityContext(Context $securityContext) {
		$this->securityContext = $securityContext;
	}


	/**
	 * @param string $formIdentifier
	 * @param string $presetName
	 * @return void
	 */
	public function indexAction($formIdentifier, $presetName) {
		$this->view->assign('formIdentifier', $formIdentifier);
		$this->view->assign('presetName', $presetName);
	}

}

Form.ts2

# Introduce a new AjaxForm object that is an identical replacement for the regular Form
prototype(Onedrop.Solution:AjaxForm) < prototype(TYPO3.Neos.NodeTypes:Form) {
	templatePath = 'resource://Onedrop.Solution/Private/Templates/NodeTypes/AjaxForm.html'
}
 
# This is an example of how to embed the new TS form object 
page.body.myForm = Onedrop.Solution:AjaxForm {
    formIdentifier = 'presentation-form'
	presetName = 'bootstrap'
}

Index.html

{namespace form=TYPO3\Form\ViewHelpers}
 <!-- This template belongs to the new AjaxFormController and renders just the form as Neos would usually do -->
<div class="ajax-content">
	<f:if condition="{formIdentifier}">
		<f:then>
			<form:render persistenceIdentifier="{formIdentifier}" presetName="{presetName}"/>
		</f:then>
		<f:else>
			<p>Please select a valid Form identifier in the inspector</p>
		</f:else>
	</f:if>
</div>

main.js

(function ($) {
	$(document).ready(function () {
		/**
		 * Ajax forms using Onedrop.Solution:AjaxForm
		 */
		$.each($('div[data-ajax="ajax-loaded-form"]'), function(idx, ajaxForm){
			var formIdentifier = $(ajaxForm).attr('data-identifier');
			var presetName = $(ajaxForm).attr('data-presetName');
			// This route must be configured in the /Configuration/Routes.yaml of the project
			var formAjaxUrl = '/form/' + formIdentifier + '/' + presetName;
            		// Delegate the submit form event to the persistent ajax container
			$(ajaxForm).on('submit', 'form', function(e){
				var formObj = $(this);
				var formURL = formObj.attr("action");
				var formData = new FormData(this);
				$.ajax({
					url: formURL,
					type: 'POST',
					data:  formData,
					mimeType:"multipart/form-data",
					contentType: false,
					cache: false,
					processData:false,
					success: function(data) {
						// Replace the form with the replied content
						$(ajaxForm).find('.ajax-content').replaceWith(data);
					}
				});
				//Prevent the browser from submitting the form and cause page reload
				e.preventDefault();
			});
 
			// Load the form via ajax
			$(ajaxForm).load(formAjaxUrl + ' .ajax-content');
		});
 
	});
})(jQuery);

Policy.yaml

# The new AjaxFormController must be registered in Flows' ACL to be allowed
resources:
  methods:
    Onedrop_Solution_AjaxForm: 'method(Onedrop\Solution\Controller\AjaxFormController->(index)Action())'
acls:
  Everybody:
    methods:
     Onedrop_Solution_AjaxForm: GRANT

Routes.yaml

# This must be added to /Configuration/Routes.yaml in order to be loaded before the Neos routes.
# I specify the strict route in order to keep the URL simple. But you could also use the Flow default routes.
-
  name: 'Ajax Form Endpoint'
  uriPattern: 'form/{formIdentifier}/{presetName}'
  defaults:
    '@package': 'Onedrop.Solution'
    '@controller': 'AjaxForm'
    '@action': 'index'
    '@format': 'html'
  httpMethods: ['GET','POST']
-
  name: 'TYPO3 Neos'
  uriPattern: '<TYPO3NeosSubroutes>'
  subRoutes:
    'TYPO3NeosSubroutes':
      package: 'TYPO3.Neos'
      variables:
        'defaultUriSuffix': '.html'