TYPO3 9.5 Forms framework AJAX

Question

I'm trying to send a form via AJAX, these form was created with the TYPO3 forms framework. A content element with this form will be shown via pageType. When i call this pageType directly and submit the form, everything went fine. Data is saved, Mail is send and success message is shown.

When i send the form via jQuery AJAX, no finisher is called and no error message is shown. Instead of this i get the form back, prefilled with my input-values ¯_(ツ)_/¯ currently i have no idea where this submit is failing.

Does someone already had this problem and can give me a hint how to solve it?

contact.form.yaml

renderingOptions:
  additionalParams:
    type: 1552662805
type: Form
identifier: contact
label: contact
prototypeName: standard
finishers:
  -
    options:
      1:
        table: 'tx_form_contact'
        mode: insert
        databaseColumnMappings:
          pid:
            value: 10
          contact_type:
            value: 'press'
        elements:
          singleselect-1:
            mapOnDatabaseColumn: salutation
          text-1:
            mapOnDatabaseColumn: last_name
          text-2:
            mapOnDatabaseColumn: first_name
          text-8:
            mapOnDatabaseColumn: company
          text-7:
            mapOnDatabaseColumn: position
          text-5:
            mapOnDatabaseColumn: address
          text-3:
            mapOnDatabaseColumn: zip
          text-4:
            mapOnDatabaseColumn: city
          text-6:
            mapOnDatabaseColumn: phone
          email-1:
            mapOnDatabaseColumn: email
          textarea-1:
            mapOnDatabaseColumn: message
          fileupload-1:
            mapOnDatabaseColumn: attachment
          checkbox-1:
            mapOnDatabaseColumn: gdpr
    identifier: SaveToDatabase
  -
    options:
      subject: 'Kontaktanfrage'
      recipientAddress: test@example.com
      recipientName: 'Empfänger'
      senderAddress: '{email-1}'
      senderName: '{text-2} {text-1}'
      replyToAddress: ''
      carbonCopyAddress: ''
      blindCarbonCopyAddress: ''
      format: html
      attachUploads: true
      translation:
        language: ''
    identifier: EmailToReceiver
  -
    options:
      message: ''
      contentElementUid: '7'
    identifier: Confirmation
renderables:
  -
    renderingOptions:
      previousButtonLabel: ''
      nextButtonLabel: ''
    type: Page
    identifier: page-1
    label: ''
    renderables:
      -
        type: Fieldset
        identifier: fieldset-1
        label: Kontaktdaten
        renderables:
          -
            properties:
              options:
                Herr: Herr
                Frau: Frau
              prependOptionLabel: '-'
            type: SingleSelect
            identifier: singleselect-1
            label: 'Single select'
          -
            defaultValue: ''
            type: Text
            identifier: text-1
            label: Name
            properties:
              fluidAdditionalAttributes:
                placeholder: Name
          -
            defaultValue: ''
            type: Text
            identifier: text-2
            label: Vorname
            properties:
              fluidAdditionalAttributes:
                placeholder: Vorname
          -
            defaultValue: ''
            type: Text
            identifier: text-8
            label: Firma
            properties:
              fluidAdditionalAttributes:
                placeholder: Firma
          -
            defaultValue: ''
            type: Text
            identifier: text-7
            label: Abteilung/Position
            properties:
              fluidAdditionalAttributes:
                placeholder: Abteilung/Position
          -
            defaultValue: ''
            type: Text
            identifier: text-5
            label: Straße
            properties:
              fluidAdditionalAttributes:
                placeholder: Straße
          -
            defaultValue: ''
            type: Text
            identifier: text-3
            label: PLZ
            properties:
              fluidAdditionalAttributes:
                placeholder: PLZ
          -
            defaultValue: ''
            type: Text
            identifier: text-4
            label: Ort
            properties:
              fluidAdditionalAttributes:
                placeholder: Ort
          -
            defaultValue: ''
            type: Text
            identifier: text-6
            label: Telefon
            properties:
              fluidAdditionalAttributes:
                placeholder: Telefon
          -
            defaultValue: ''
            type: Email
            identifier: email-1
            label: E-Mail
            properties:
              fluidAdditionalAttributes:
                placeholder: E-Mail
                required: required
              validationErrorMessages:
                -
                  code: 1221560910
                  message: 'Bitte füllen Sie die E-Mail-Adresse aus'
                -
                  code: 1221560718
                  message: 'Bitte füllen Sie die E-Mail-Adresse aus'
                -
                  code: 1347992400
                  message: 'Bitte füllen Sie die E-Mail-Adresse aus'
                -
                  code: 1347992453
                  message: 'Bitte füllen Sie die E-Mail-Adresse aus'
              elementDescription: ''
            validators:
              -
                identifier: EmailAddress
              -
                identifier: NotEmpty

      - type: Fieldset
        identifier: fieldset-3
        label: 'Ihre Nachricht'

        renderables:
          - defaultValue: ''
            type: Textarea
            identifier: textarea-1
            label: 'Ihre Nachricht an uns'
            properties:
              fluidAdditionalAttributes:
                required: required
              validationErrorMessages:
                - code: 1221560910
                  message: 'Bitte teilen Sie uns Ihr Anliegen mit'
                - code: 1221560718
                  message: 'Bitte teilen Sie uns Ihr Anliegen mit'
                - code: 1347992400
                  message: 'Bitte teilen Sie uns Ihr Anliegen mit'
                - code: 1347992453
                  message: 'Bitte teilen Sie uns Ihr Anliegen mit'
            validators:
              - identifier: NotEmpty

          - properties:
              saveToFileMount: '1:/user_upload/contact/press/'
              allowedMimeTypes:
                - application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
                - application/pdf
                - application/zip
                - image/jpeg
              elementDescription: 'Sie können Daten in den Formaten pdf, jpg, doc, docx und zip hochladen. Eine Datei darf maximal 4MB groß sein.'
            type: FileUpload
            identifier: fileupload-1
            label: Dateianhang
            validators:
              -
                options:
                  minimum: 0B
                  maximum: 4M
                identifier: FileSize

      -
        type: Fieldset
        identifier: fieldset-2
        label: 'Formular absenden'
        renderables:
          -
            type: Checkbox
            identifier: checkbox-1
            label: 'Ich habe die Nutzungsbedingungen und Bestimmungen zum Datenschutz gelesen und akzeptiere diese.'
            properties:
              fluidAdditionalAttributes:
                required: required
              validationErrorMessages:
                -
                  code: 1221560910
                  message: 'Bitte bestätigen Sie dieses Feld'
                -
                  code: 1221560718
                  message: 'Bitte bestätigen Sie dieses Feld'
                -
                  code: 1347992400
                  message: 'Bitte bestätigen Sie dieses Feld'
                -
                  code: 1347992453
                  message: 'Bitte bestätigen Sie dieses Feld'
            validators:
              -
                identifier: NotEmpty

FormContact.typoscript

formContact = PAGE
formContact {
    typeNum = 1552662805

    config {
        disableAllHeaderCode = 1
        xhtml_cleaning = 0
        admPanel = 0
        #additionalHeaders = Content-type: text/plain
        no_cache = 1
        debug = 0
    }

    10 = CONTENT
    10 {
        table = tt_content
        select {
            pidInList = 25
            uidInList = 94
        }
    }
}

contact.js

let form = $('form')
let formData = new FormData(form.get(0));
let request = $.ajax({
    url: form.prop('action'),
    method: 'POST',
    data: formData,
    enctype: 'multipart/form-data',
    processData: false,  // Important!
    contentType: false,
    cache: false,

    beforeSend: function() {
        formHolder.html(template.loadingSpinner);
    }
});

// show form
request.done(function(data, text, jqXHR) {
    formHolder.html(data);
});

// show error
request.fail(function(jqXHR) {
    formHolder.html(template.errorMessage.replace('$$MESSAGE$$', formSelector.data('errorMessage')));
});

Answer 1

The button holds the value of __currentPage

<button type="submit" name="tx_form_formframework[contact-form-5][__currentPage]" value="1">

Answer 2

Had the same issue. Needed to add

<input type='hidden' name='tx_form_formframework[FORMNAME][__currentPage]' value='1'>

to my Form. (Did it with Jquery)

$('#FORMNAME').prepend("<input type='hidden' name='tx_form_formframework[FORMNAME][__currentPage]' value='1'>");

After that it worked. Did a comparison to the normal request with the ajax request.