# Document Viewer: Pre-Select Form Fields Client-Side using JavaScript > One of the primary uses of the Document Viewer is to collect data from form fields. This article shows how to use JavaScript to pre-select values of known form fields client side. - **Author:** Bjoern Meyer - **Published:** 2023-07-17 - **Modified:** 2025-11-16 - **Description:** One of the primary uses of the Document Viewer is to collect data from form fields. This article shows how to use JavaScript to pre-select values of known form fields client side. - **3 min read** (579 words) - **Tags:** - ASP.NET - Document Viewer - Form Fields - **LLMs.txt URL:** https://www.textcontrol.com/blog/2023/07/17/document-viewer-preselect-form-fields-clientside-using-javascript/llms.txt - **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2023/07/17/document-viewer-preselect-form-fields-clientside-using-javascript/llms-full.txt - **Canonical URL:** https://www.textcontrol.com/blog/2023/07/17/document-viewer-preselect-form-fields-clientside-using-javascript/ --- A form can be prepared by merging known data into the document before the Document Viewer is used to deliver the form to the end user. Consider the following template, which consists of form text fields, check boxes, and drop-down boxes. ![Form template](https://s1-www.textcontrol.com/assets/dist/blog/2023/07/17/a/assets/template_form.webp "Form template") ### Pre-Select Known Values There are three ways to preselect known data: - The default values will be pre-selected and stored in the template. - Known data is merged server-side using MailMerge. - Known data is merged client-side using JavaScript. When merging data server-side, the template is loaded into a ServerTextControl instance and MailMerge is used to populate form fields from JSON data. ``` byte[] document; using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) { tx.Create(); tx.Load("App_Data/vaccination_form.tx", TXTextControl.StreamType.InternalUnicodeFormat); using (TXTextControl.DocumentServer.MailMerge mm = new TXTextControl.DocumentServer.MailMerge()) { mm.TextComponent = tx; mm.FormFieldMergeType = TXTextControl.DocumentServer.FormFieldMergeType.Preselect; mm.RemoveEmptyFields = false; // pre-select form fields with known data and merge // data into merge fields mm.MergeObject(data); } tx.Save(out document, TXTextControl.BinaryStreamType.InternalUnicodeFormat); } ``` But what if data is being collected somewhere else in the web application and another server callback or web API call is not the intent? Consider an Angular SPA where some of the form data is already available client side. ### Access Fields with JavaScript In this case, the Document Viewer form fields are accessible through JavaScript. The following dictionary is available on the client side and contains known values for some of the form fields in the template. ``` var values = { "vendor_name": "Text Control, LLC", "vendor_address": "4600 Park Road", "vendor_line2": "Suite 470", "vendor_city": "Charlotte", "vendor_state": "NC", "vendor_zip": "28209", "vendor_country": "USA", "vendor_phone": "(704) 544-7445", "vendor_fax": "(704) 542-0936", "business_american": true, "business_size_small": true, "business_size": "Small Business" }; ``` Form fields in the Document Viewer are available as regular HTML input elements. They can be accessed via JavaScript in the appropriate shadow DOM. > **Web Component** > > Learn more about the shadow DOM and the Web Component standard. > > [TX Text Control DocumentViewer Becomes a Web Component ](https://www.textcontrol.com/blog/2023/03/10/preview-tx-text-control-documentviewer-is-becoming-a-web-component/llms-full.txt) ``` window.addEventListener("documentViewerLoaded", function () { var elem = document.querySelector("tx-document-viewer"); elem.shadowRoot.querySelectorAll(".formFieldDiv").forEach((formField) => { if (values[formField.name] === undefined) return; var formFieldType = formField.getAttribute("formfieldtype"); var fieldValue = values[formField.name]; switch (formFieldType) { case "checkbox": formField.checked = fieldValue; break; case "text": formField.value = fieldValue; break; case "selection": if (formField.nodeName === "INPUT") { formField.value = fieldValue; } else if (formField.nodeName === "SELECT") { formField.querySelectorAll("option").forEach((option) => { if (option.value === fieldValue) { option.selected = true; } }); } break; } }); }); ``` In the code above, all form fields with the class name *formFieldDiv* are iterated. The custom attribute *formfieldtype* defines the type of the form fields, which are handled in a different way in the switch case statement. Finally, all known values are added to the form fields. ![Form template](https://s1-www.textcontrol.com/assets/dist/blog/2023/07/17/a/assets/results.webp "Form template") These values will also be exported when you call forms.getValues(): ``` [ { "name": "vendor_name", "type": "text", "value": "Text Control, LLC" }, { "name": "vendor_address", "type": "text", "value": "4600 Park Road" }, { "name": "vendor_line2", "type": "text", "value": "Suite 470" }, { "name": "vendor_line3", "type": "text", "value": "" }, { "name": "vendor_city", "type": "text", "value": "Charlotte" }, ... ] ``` When the document is downloaded using the *downloadDocument* method, the values of the form fields will be added to the PDF form fields. ![Form template](https://s1-www.textcontrol.com/assets/dist/blog/2023/07/17/a/assets/pdf.webp "Form template") --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Use Case: Create, Deploy and Process Insurance Claim Forms](https://www.textcontrol.com/blog/2023/06/09/use-case-create-deploy-and-process-insurance-claim-forms/llms.txt) - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [How to Import and Read Form Fields from DOCX Documents in .NET on Linux](https://www.textcontrol.com/blog/2025/05/19/how-to-import-and-read-form-fields-from-docx-documents-in-net-on-linux/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [Create Fillable PDF Forms in .NET C#](https://www.textcontrol.com/blog/2024/11/12/create-fillable-pdf-forms-in-net-c-sharp/llms.txt) - [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt) - [Optimizing Digital Signature Workflows: Starting with MS Word DOCX Files Instead of PDFs in C#](https://www.textcontrol.com/blog/2024/09/27/optimizing-digital-signature-workflows-starting-with-ms-word-docx-files-instead-of-pdfs-in-csharp/llms.txt) - [Document Viewer: Setting the Rendering Mode](https://www.textcontrol.com/blog/2024/08/22/document-viewer-setting-the-rendering-mode/llms.txt) - [View MS Word DOCX and PDF Documents using a .NET C# Document Viewer for ASP.NET Core and ASP.NET](https://www.textcontrol.com/blog/2024/08/08/view-ms-word-docx-and-pdf-documents-using-a-net-csharp-document-viewer-for-aspnet-core-and-aspnet/llms.txt) - [Stay Up-To-Date: Document Viewer 32.3.1 Released](https://www.textcontrol.com/blog/2024/08/08/stay-up-to-date-document-viewer-32-3-1-released/llms.txt) - [Getting Started Video Tutorial: How to Add Electronic and Digital Signatures to PDF Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-add-electronic-and-digital-signatures-to-pdf-documents-in-asp-net-core-csharp/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-asp-net-core-csharp/llms.txt) - [Extension Method: Flatten Forms Fields in PDF Documents using .NET C#](https://www.textcontrol.com/blog/2024/07/17/flatten-forms-fields-in-pdf-documents-using-net-c-sharp/llms.txt) - [Transforming Financial Documents into Smart and Secure Forms in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/05/01/transforming-financial-documents-into-smart-and-secure-forms-in-asp-net-core-c-sharp/llms.txt) - [Document Viewer: Long Polling Support for Loading Documents](https://www.textcontrol.com/blog/2024/04/25/document-viewer-long-polling-support-for-loading-documents/llms.txt) - [Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/04/19/adding-and-sharing-annotations-across-document-types-using-the-document-viewer-in-asp-net-core-c-sharp/llms.txt) - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Adding a Security Middleware to ASP.NET Core Web Applications to Protect TX Text Control Document Editor and Document Viewer Endpoints](https://www.textcontrol.com/blog/2024/03/18/adding-a-security-middleware-to-asp-net-core-web-applications-to-protect-tx-text-control-document-editor-and-document-viewer-endpoints/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Document Viewer 32.2.1 Released](https://www.textcontrol.com/blog/2024/03/13/document-viewer-3221-released/llms.txt)