Version X18 (28.0) is shipped with a complete new JavaScript API to program the online document editor that comes with TX Text Control .NET Server for ASP.NET.

The complete JavaScript API documentation can be found in our online docs:

JavaScript API

This article describes typical tasks for inserting and processing form fields such as check boxes, drop-down boxes and form text fields.

Adding Form Text Fields

Form text fields can be used to retrieve textual content from users. A form text field has a default empty width (first parameter in the addTextFormField ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ addTextFormField Method
Adds a new TextFormField. method) and it is auto-extending.

function addTextFormField() {
TXTextControl.formFields.getCanAdd(canAdd => {
if (canAdd) {
TXTextControl.formFields.addTextFormField(0, function(insertedFormField) {
insertedFormField.setName("Field1");
});
} else {
alert("Form field cannot be added at this location.");
}
});
}
view raw test.js hosted with ❤ by GitHub

The getCanAdd ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextFieldCollectionBase Object
╰ getCanAdd Method
Gets a value indicating whether a new text field can be inserted at the current input position. method should be used for all fields inherited from TextField ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextField Object
Represents a text field in a document. . It returns true, if the field can be added at the current input position. A text field (or form fields) cannot be nested and therefore they cannot be inserted at positions that already contain a field. The addtextformfield method returns the field itself in the callback and can be directly used to set additional properties such as the name ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl.TextField Object
╰ name Property
Obsolete. property that is defined using the setName ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextField Object
╰ setName Method
Sets the name of a text field. method.

Get Form Field By Name

While the getItem ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ getItem Method
Gets the form field at the current text input position or the form field with the specified id. method returns a field at the current input position or based on a given ID, the forEach ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ Collection Object
╰ forEach Method
Executes a callback function for each element. method can be used to iterate through all elements of form field collections.

The following asynchronous function loops through all form fields and checks for the name property. If found, the Promise is resolved by returning the form field itself.

function getFormFieldByName(name) {
return new Promise(resolve => {
TXTextControl.formFields.forEach(function(formField) {
formField.getName(function(formFieldName){
if (formFieldName === name)
{
resolve(formField);
}
})
})
});
}
var formField = await getFormFieldByName("Field1");
view raw test.js hosted with ❤ by GitHub

This function needs to be called from an async function with the await operator to wait for the response.

Inserting Check Form Fields

Analogically with form text fields, check boxes can be added using the addCheckFormField ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ addCheckFormField Method
Adds a new CheckFormField. method.

function addCheckFormField() {
TXTextControl.formFields.getCanAdd(canAdd => {
if (canAdd) {
TXTextControl.formFields.addCheckFormField(true);
}
});
}
view raw test.js hosted with ❤ by GitHub

Getting Form Fields at the Input Position

In order to get the field at the current input position, the getItem ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ getItem Method
Gets the form field at the current text input position or the form field with the specified id. method can be used. The following code snippet shows how to change the state of a check form field when the field retrieves the input position. Usually, a check box is first activated and then checked and therefore requires two clicks initially to change the state of the check box.

function textFieldEnteredHandler(enteredField) {
if (enteredField.textField.type === "CHECKFORMFIELD")
{
TXTextControl.formFields.getItem(function(checkFormField) {
checkFormField.getChecked(function(checked) {
checkFormField.setChecked(!checked);
})
})
}
}
TXTextControl.addEventListener("textFieldEntered", textFieldEnteredHandler);
view raw test.js hosted with ❤ by GitHub

Adding Selection Form Fields

The following code shows how to insert a non-editable selection form field with pre-defined items. The setSelectedIndex ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ SelectionFormField Object
╰ setSelectedIndex Method
Sets the index of the selected item of the SelectionFormField. method pre-selects a specific item in the list of items.

function addDropDownFormField(items) {
TXTextControl.formFields.getCanAdd(canAdd => {
if (canAdd) {
TXTextControl.formFields.addSelectionFormField(0, sff => {
// no custom text
sff.setEditable(false);
sff.setItems(items);
// select "Uber"
sff.setSelectedIndex(3);
});
}
});
}
var transportation = ["Bicycle", "Car", "Scooter", "Uber", "Cab"];
addDropDownFormField(transportation);
view raw test.js hosted with ❤ by GitHub

Test this on your own using all document editor versions including Angular, Node.js, MVC and Web Forms that all share the same JavaScript API.