TYPO3 9.5 表單框架 AJAX

Question

我正在嘗試通過 AJAX 發送表單，這些表單是使用 TYPO3 表單框架創建的。 具有此表單的內容元素將通過 pageType 顯示。 當我直接調用此 pageType 並提交表單時，一切正常。 數據已保存，郵件已發送並顯示成功消息。

當我通過 jQuery AJAX 發送表單時，沒有調用完成程序，也沒有顯示錯誤消息。 取而代之的是，我取回了表單，預填充了我的輸入值 ¯_(ツ)_/¯ 目前我不知道提交失敗的地方。

是否有人已經遇到過這個問題並且可以給我一個提示如何解決它？

聯系人.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
        }
    }
}

聯系人.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

有同樣的問題。 需要添加

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

到我的表格。 （用Jquery做的）

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

在那之后它起作用了。 用ajax請求和普通請求做了對比。