# Actions

## Content

DsPdfJS provides multiple actions that enhance interactivity within a document. These actions allow users to trigger specific behaviors when interacting with links, document outlines, and other elements.

### ActionURI

A URI action allows you to create a hyperlink in a PDF document that navigates to a specific URI. DsPdfJS provides the [ActionURI ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/ActionURI)class and its properties, which enable you to define this action type in a PDF document.
The following code links text to Google's official site by using an ActionURI object.

>type=note
> **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

```javascript
const doc = new PdfDocument();
const page = doc.newPage();
const ctx = page.context;

// Draw some text that will represent the link:
const tf = new Format({
    font: Font.getPdfFont(StandardPdfFont.Times),
    fontSize: 14
});
var tl = new Layout({
    runs: [{
        text: "Google google on the wall, please tell me all!",
        format: tf
    }]
});
tl.performLayout();
ctx.drawLayout(tl, 72, 72);

// Add a link associated with the text area:
page.annotations.add({
    type: 'link',
    rect: { x: 72, y: 72, width: tl.contentWidth, height: tl.contentHeight },
    action: new ActionURI("http://www.google.com")
});

//Save the document
Util.saveFile("ActionURI.pdf", doc.savePdf());
```

![ActionURI.gif](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/ActionURI-20260426.17419c.gif?width=720)

### ActionJavaScript

A JavaScript action allows you to run a snippet of JavaScript code that is embedded in the PDF document. You can run the JavaScript code simply by opening the document or other triggering events. DsPdfJS provides the [ActionJavaScript ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/ActionJavaScript)class and its properties, which enable you to define this action type in a PDF document.
The following code demonstrates text that runs JavaScript code when clicked. The script displays a popup menu with multiple options and alerts the option that the user picked.

```javascript
const js =
    "var cChoice = app.popUpMenu(\"Introduction\", \" - \", \"Chapter 1\",\r\n" +
    "[ \"Chapter 2\", \"Chapter 2 Start\", \"Chapter 2 Middle\",\r\n" +
    "[\"Chapter 2 End\", \"The End\"]]);\r\n" +
    "app.alert(\"You chose the '\" + cChoice + \"' menu item\");";

const doc = new PdfDocument();
const page = doc.newPage();

// Add warning about this possibly not working in a browser:
Util.addNote("Note that JavaScript may not work in some PDF viewers such as built-in browser viewers.",
    page);

// Draw the link string in a rectangle:
const ctx = page.context;
var tf = new Format({
    font: Font.getPdfFont(StandardPdfFont.Times),
    fontSize: 14
})
const text = "Click this to show the popup menu.";
const textSize = ctx.measureText(text, tf);
const rect = { x: 72, y: 72 * 2, width: textSize.width, height: textSize.height };
ctx.drawRect(rect, { fillColor: 'LightGoldenrodYellow' });
ctx.drawText(text, tf, rect.x, rect.y);

// create LinkAnnotation with ActionJavaScript
const la = new LinkAnnotation();
la.rect = rect;
la.action = new ActionJavaScript(js);
page.annotations.add(la);

//Save the document
Util.saveFile("ActionJavaScript.pdf", doc.savePdf());
```

![ActionJavascript.gif](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/ActionJavascript-20260426.c0a921.gif?width=720)
**Limitations**
JavaScript may not work in some PDF viewers (e.g. built-in browser viewers).

### ActionSubmitForm

A SubmitForm action allows you to submit interactive form fields to a specified URL. This is typically the address of a web server that processes the form fields and returns a response. DsPdfJS uses the [ActionSubmitForm ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/ActionSubmitForm)class and its properties, which enable you to define this action type in a PDF document.
The following code demonstrates a form that, when submitted, sends the data to a sample server. The server receives it and sends the data back in a simple HTML page, displaying the form field names and their respective values.

```javascript
const doc = new PdfDocument();
const page = doc.newPage();

const rc = Util.addNote(
    "In this sample the Submit button is associated with the ActionSubmitForm action, " +
    "with the URL pointing to a POST handler running on our sample server. " +
    "When the form is submitted, that handler receives a collection of form field names " +
    "and field values from the filled form, and sends it back in a simple HTML page. " +
    "If you download this sample, to successfully run it you will need to set up your own " +
    "handler, and change the Submit button action's URL to point to that handler.",
    page);

const ctx = page.context;
const tf = new Format({
    font: Font.getPdfFont(StandardPdfFont.Times),
    fontSize: 14
}); 
let x = 72;
let y = rc.y + rc.height + 36;
const fldOffset = 72 * 2 + 46;
const fldHeight = tf.fontSize * 1.2;
const dY = 32;

// Text field:
ctx.drawText("First name:", tf, x, y);
var fldFirstName = new TextField();
fldFirstName.name = "FirstName";
fldFirstName.value = "John";
fldFirstName.widget.page = page;
fldFirstName.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight };
fldFirstName.widget.defaultAppearance.font = tf.font;
fldFirstName.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldFirstName);
y += dY;

// Text field:
ctx.drawText("Last name:", tf, x, y);
const fldLastName = new TextField();
fldLastName.name = "LastName";
fldLastName.value = "Smith";
fldLastName.widget.page = page;
fldLastName.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight };
fldLastName.widget.defaultAppearance.font = tf.font;
fldLastName.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldLastName);
y += dY;

// Checkbox ("json" syntax):
ctx.drawText("Subscribe to Mailing List:", tf, x, y);
doc.acroForm.fields.add({
    type: 'checkbox',
    name: 'Subscribe',
    value: true,
    widget: {
        page: page,
        rect: { x: x + fldOffset, y: y, width: fldHeight, height: fldHeight }
    }
})
y += dY;

// Multiline TextBox:
ctx.drawText("Additional information:", tf, x, y);
const fldAdditionalInfo = new TextField();
fldAdditionalInfo.name = "AdditionalInfo";
fldAdditionalInfo.multiline = true;
fldAdditionalInfo.widget.page = page;
fldAdditionalInfo.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight * 2 };
fldAdditionalInfo.widget.defaultAppearance.font = tf.font;
fldAdditionalInfo.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldAdditionalInfo);
y += dY * 2;

// Submit form button:
const btnSubmit = new PushButtonField();
btnSubmit.widget.rect = { x: x + fldOffset, y: y, width: 72, height: fldHeight };
btnSubmit.widget.buttonAppearance.caption = "Submit";
btnSubmit.widget.highlighting = HighlightingMode.Invert;
btnSubmit.widget.page = page;

// The URL for the submission:
btnSubmit.widget.activate = new ActionSubmitForm("/Samples/HandleFormSubmitFields");
doc.acroForm.fields.add(btnSubmit);

//Save the document
Util.saveFile("ActionSubmitForm.pdf", doc.savePdf());
```

![ActionSubmitForm.gif](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/ActionSubmitForm-20260427.59c367.gif?width=720)

### ActionResetForm

A ResetForm action allows users to reset interactive form fields to their default values. If no default value is defined for a field, its value is cleared. For fields that cannot have a value, such as [PushButtonField](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PushButtonField), the action has no effect. DsPdfJS uses the [ActionResetForm ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/ActionResetForm)class and its properties, which enable you to define this action type in a PDF document.
The following code demonstrates a form with a reset button that resets the form fields to their default values when clicked.

```javascript
const doc = new PdfDocument();
const page = doc.newPage();

const rc = Util.addNote(
    "In this sample the Reset button is associated with the ActionResetForm action." +
    "If no default value is defined for a field, its value is cleared.",
    page);

const ctx = page.context;
const tf = new Format({
    font: Font.getPdfFont(StandardPdfFont.Times),
    fontSize: 14
});
let x = 72;
let y = rc.y + rc.height + 36;
const fldOffset = 72 * 2 + 46;
const fldHeight = tf.fontSize * 1.2;
const dY = 32;

// Text field:
ctx.drawText("First name:", tf, x, y);
var fldFirstName = new TextField();
fldFirstName.name = "FirstName";
fldFirstName.value = "John";
fldFirstName.widget.page = page;
fldFirstName.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight };
fldFirstName.widget.defaultAppearance.font = tf.font;
fldFirstName.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldFirstName);
y += dY;

// Text field:
ctx.drawText("Last name:", tf, x, y);
const fldLastName = new TextField();
fldLastName.name = "LastName";
fldLastName.value = "Smith";
fldLastName.widget.page = page;
fldLastName.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight };
fldLastName.widget.defaultAppearance.font = tf.font;
fldLastName.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldLastName);
y += dY;

// Checkbox ("json" syntax):
ctx.drawText("Subscribe to Mailing List:", tf, x, y);
doc.acroForm.fields.add({
    type: 'checkbox',
    name: 'Subscribe',
    value: true,
    widget: {
        page: page,
        rect: { x: x + fldOffset, y: y, width: fldHeight, height: fldHeight }
    }
})
y += dY;

// Multiline TextBox:
ctx.drawText("Additional information:", tf, x, y);
const fldAdditionalInfo = new TextField();
fldAdditionalInfo.name = "AdditionalInfo";
fldAdditionalInfo.multiline = true;
fldAdditionalInfo.widget.page = page;
fldAdditionalInfo.widget.rect = { x: x + fldOffset, y: y, width: 72 * 3, height: fldHeight * 2 };
fldAdditionalInfo.widget.defaultAppearance.font = tf.font;
fldAdditionalInfo.widget.defaultAppearance.fontSize = tf.fontSize;
doc.acroForm.fields.add(fldAdditionalInfo);
y += dY * 2;

// Reset form button:
doc.acroForm.fields.add({
    type: 'button',
    name: 'btnReset',
    caption: 'Reset',
    widget: {
        page: page,
        rect: { x: x + fldOffset + 72 * 1.5, y: y, width: 72, height: fldHeight },
        highlighting: HighlightingMode.Invert,
        activate: {
            type: 'reset'
        }
    }
})

//Save the document
Util.saveFile("ActionResetForm.pdf", doc.savePdf());
```

![ActionResetForm.gif](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/ActionResetForm-20260426.5f7288.gif?width=720)