How use ext:typoscript_rendering with ext:from in TYPO3

问题

I have on the page a form (based on ext:form) like the content element. I want to run the form when I click on the button without not reload a page. I know that I can use this ext:typoscript_rendering but I still do not find an example, how to do it.

I already created and added JS

$(document).ready(function () {
    $('.frame-type-form_formframework').on('click', '#ajax-submit', function (e) {
        var ajaxUrl = $(this).data('ajaxuri');
        if (ajaxUrl !== undefined && ajaxUrl !== '') {
            e.preventDefault();
            var container = 'formaddnewpost-container-348';
            var formData = new FormData(this); // ???
            $.ajax({
                url: ajaxUrl,
                type: 'post',
                data: formData, // ???
                success: function (result) {
                    var ajaxDom = $(result).find('#' + container);
                    $('#' + container).replaceWith(ajaxDom);
                }
            });
        }
    });
});

I add to form:

additionalAttributes="{data-ajaxuri:'{t:uri.action(additionalParams:\'{tx_news_pi1:{controller:News,action:detail,news:newsItem}}\',contextRecord:\'currentPage\',extensionName:\'form\',pluginName:\'formframework\',controller:\'FormFrontend\',action:\'render\')->f:format.htmlentities()}'}"

And I add to button:

<f:form.button additionalAttributes="{data-ajaxuri:'{t:uri.action(additionalParams:\'{tx_news_pi1:{controller:News,action:detail,news:newsItem}}\',contextRecord:\'currentPage\',extensionName:\'form\',pluginName:\'formframework\',controller:\'FormFrontend\',action:\'render\')->f:format.htmlentities()}'}" property="__currentPage" value="{form.nextPage.index}" id="ajax-submit" class="btn btn-primary">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button>

I tried

$(document).ready(function () {
    $('.frame-type-form_formframework').on('click', '#ajax-submit', function (e) {
        var ajaxUrl = $(this).data('ajaxuri');
        if (ajaxUrl !== undefined && ajaxUrl !== '') {
            e.preventDefault();
            var formIdSelector = '<f:format.raw>{form.formDefinition.identifier}</f:format.raw>';
            var containerIdSelector = formIdSelector + '-container';
            $.ajax({
                url: ajaxUrl,
                type: 'POST',
                data: $('#' + formIdSelector).serialize(),
                contentType: false,
                processData: false,
                success: function (response) {
                    var ajaxDom = $(response).find('#' + containerIdSelector);
                    $('#' + containerIdSelector).replaceWith(ajaxDom);
                }
            });
        }
    });
});

...and this working well. Now the form running without reloading the page but data from the form not sending.

Now staying question, how to send data from the form and get the result?

来源：https://stackoverflow.com/questions/59000554/how-use-exttyposcript-rendering-with-extfrom-in-typo3

标签

ajax

forms

typo3