0

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?

TYPO3UA
  • 81
  • 6
  • The issue you are facing is not related to typoscript_rendering, but to form serialization. So maybe check what FormData is and how to get the from values out of it – helhum Nov 24 '19 at 10:49
  • @helhum thanks! Maybe you have the experience to work your 'ext:typoscript_rendering' and with 'ext:form' I do not know how to combine them. Maybe you have an example or you can to direct me on to there where I can to read about it more. – TYPO3UA Nov 24 '19 at 11:09
  • Have you checked this? https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload – helhum Nov 25 '19 at 14:53
  • Yes, I saw and did try everything to use it but it is without positive results. I have seen it yet https://www.comuno.net/blog/detail/formular-mit-typoscript-rendering-per-ajax-verschicken/ and tried it but not works for me I do not understand why. I find nothing about `ext:typoscript_rendering` and `ext:form`. I did not find valid examples of your `ext: typoscript_rendering`, but only `ext: new` pagination – TYPO3UA Dec 03 '19 at 19:39

0 Answers0