This project is no longer maintained and no further public releases are planned.

No further support will be given.

Feel free to fork the git repository.

AjaxHandler\JQuery

Currently the only available AjaxHandler.
It uses the jQuery library (www.jquery.com). The jQuery library is not included. Please include it yourself.

Note: Since version 1.5.0 AjaxHandler_JQuery requires jQuery 1.7 or higher.

IMPORTANT: With version 2.2.0 AjaxHandler\JQuery was rewritten

The JS code has JQuery plugin style now and multiple AJAX forms on a page should not interfere with eachother anymore.
As a result the options "alias", "ajaxSubmitCallback" and "ajaxValidationCallback" have no effect anymore.

If you want to use callbacks, please configure a formID in your TypoScript and add this id to your form tag. Then, you can bind these events:

Version added

1.0.0

TypoScript path

plugin.Tx_Formhandler.settings.ajax.x copy to clipboard

Example code

$(function(){
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitStart', function(event) {
    
  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitComplete', function(event, data, status) {

  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitFinished', function(event, data, status) {

  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateStart', function(event, field) {
    
  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateComplete', function(event, field, result) {

  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateFinished', function(event, field, result) {

  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('fileRemoveStart', function(event, removeLink) {

  });
  
  $(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('fileRemoveFinished', function(event, removeLink) {

  });
});

Properties

.disableJS

Allows to disable all JS code generated by the AjaxHandler.

Data type

Integer - cObj

Version added

2.3.0

.initial

Initial content of the AJAX validation markers

Data type

String | cObj

Version added

1.0.0

.loading

The loading animation text or image used for AJAX validation.

Data type

String | cObj

Default value

<img src="typo3conf/ext/formhandler/Resources/Images/ajax-loader.gif"/>

Version added

1.0.0

.ok

Content to display if an AJAX validation was successful.

Data type

String | cObj

Default value

<img src="typo3conf/ext/formhandler/Resources/Images/ok.png"/>

Version added

1.0.0

.notOk

Content to display if an AJAX validation failed.

Data type

String | cObj

Default value

<img src="typo3conf/ext/formhandler/Resources/Images/notOk.png"/>

Version added

1.0.0

.autoDisableSubmitButton

If you use AJAX validation, you can disable the submit button until all error checks are valid. If you set this option to "1" Formhandler adds the attribute "disabled" to the submit button. If all AJAX based validation is valid, the attribute is removed and the user can submit the form.

To be able to style the submit button or other stuff based on the validation status, you can add the marker ###validation-status### to your form.

You have to set a formID in TypoScript and in the HTML template for your form!

Data type

Boolean | cObj

Version added

1.1.0

.ajaxSubmit

If set to "1", the form is submitted using an AJAX post request.

The container of the form is replaced with the response HTML.

Data type

Boolean | cObj

Version added

1.1.0

Important

File uploads do not work when using ajaxSubmit. ajaxSubmit doesn't work with disableWrapInBaseClass=1.

.ajaxSubmitLoader

When the form was submitted using AJAX, this text/HTML is shown until the response from the server arrives. So this setting is only useful in combination with ajaxSubmit.

The content of this setting is put into the marker ###loading_ajax-submit###.

Data type

String | cObj

Default value

<span class="loading_ajax-submit"><img src="typo3conf/ext/formhandler/Resources/Images/ajax-loader.gif"></span>

Version added

1.1.0

.ajaxSubmitCallback

Configure the name of a JS function defined before. This function will be called as a callback function after AJAX calls. The function parameters are "data" and "textStatus". More information about the parameters in the jQuery documentation.

Data type

String | cObj

Version added

1.7.0

.ajaxValidationCallback

Configure the name of a JS function defined before. This function will be called as a callback function after an AJAX validation. The function parameters are:

field
jQuery element
The form field
result
jQuery element
The HTML returned by validation
isFieldValid
boolean
The validation result

Data type

String | cObj

Version added

2.0.0

Example code

function validationCallback(field, result, isFieldValid) {
	if(!isFieldValid) {
		field.addClass("error");
	} else {
		field.removeClass("error");
	}
}

.alias

Configure a custom alias instead of "jQuery" to be used in the generated JS.

Useful in combination with jQuery noConflict.

Data type

String | cObj

Default value

jQuery

Version added

1.3.0

.validationStatusClasses.base

Set a custom base class for the validation status of a form. Only useful in combination with autoDisableSubmitbutton.

Data type

String | cObj

Default value

formhandler-validation-status

Version added

1.3.0

.validationStatusClasses.valid

Set a custom class for the validation status of a valid form. Only useful in combination with autoDisableSubmitbutton.

Data type

String | cObj

Default value

valid

Version added

1.3.0

.validationStatusClasses.invalid

Set a custom class for the validation status of an invalid form. Only useful in combination with autoDisableSubmitbutton.

Data type

String | cObj

Default value

invalid

Version added

1.3.0

.submitButtonSelector

When using ajaxSubmit with more than one form on a page, you might want to set a special JQuery selector for the submit button.

Data type

String | cObj

Default value

.Tx-Formhandler INPUT[type=\'submit\']

Version added

1.4.0

.jsPosition

Control the position the generated JS is placed on the place. Formhandler always places the JS in the head section.

Use the value "footer" to add the JS before the closing body tag.
Use the value "inline" to add the JS inline. Useful if you use "disableAllHeaderCode" (Added in version 1.7.0)

Data type

String | cObj

Version added

1.4.0