You can create a custom form field and use it for tracking if you are using form fields on your page that are not created by using the html tag "<input>".

Class

constructor

Create an instance of the class "CustomFormField" and pass name and value which should be tracked. Pass the custom form field to a CustomForm to track it.

/**
 * @param {string} name
 * @param {string} [value]
 *
 * @constructor
 */
wtSmart.extension.form.CustomFormField(name, value);
JS

setAttribute

Set an attribute.

/**
 * @param {string} key
 * @param {string} value
 */
customFormFieldInstance.setAttribute(key, value);
JS

getAttribute

Get an attribute value.

/**
 * @param {string} key
 *
 * @returns {string}
 */
customFormFieldInstance.getAttribute(key);
JS

focus

Change the internal form field status to "focused".

customFormFieldInstance.focus();
JS

blur

Change the internal form field status to "blurred".

customFormFieldInstance.blur();
JS

addEventListener

/**
 * @param {string} evt
 * @param {function} func
 */
customFormFieldInstance.addEventListener(evt, func);
JS

removeEventListener

/**
 * @param {string} evt
 */
customFormFieldInstance.removeEventListener(evt);
JS

Example

// create a custom form field
var customFormFieldInstance = new wtSmart.extension.form.CustomFormField(
    'custom form field name'
);

// set an attribute
customFormFieldInstance.setAttribute('foo', 'bar');

// get an attribute
var attribute = customFormFieldInstance.getAttribute('foo');

// change the internal form field status to 'focused'
customFormFieldInstance.focus();

// change the internal form field status to 'blurred'
customFormFieldInstance.blur();

// add event listener
customFormFieldInstance.addEventListener('focus', function() {
    console.log('custom form field was focused');
});

// remove all event listener
customFormFieldInstance.removeEventListener('focus');
JS