# Render Radiobutton when checkbox is filled

**URL:** <https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289>\
**Category:** Bug Reports\
**Tags:** pdfjs-express\
**Created:** [January 11, 2023, 11:55am UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289 "2023-01-11T11:55:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 11:55am UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/1 "2023-01-11T11:55:53Z")

</div>

Hello, I’m facing an issue when rendering a form containing only checkbox, when a check box is filled with a value, it render it as a radio button with red background and black circle inside, instead of tick with green background. Is the inferrence of widgets is define by specific field values ?

I’m using pdf.js express 8.7 an dit’s doing it actually on all PDF.

For informations default value for my checkbox is “Oui” !

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 11, 2023, 4:26pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/2 "2023-01-11T16:26:15Z")

</div>

Hi @henri.piot

Could you provide a PDF where this is happening?

Also could you check the widget type before and after clicking the checkboxes?

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 4:44pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/3 "2023-01-11T16:44:55Z")

</div>

Hi,

There you will find 2 pdf, _fcp\_1\_preprose\_uhc.pdf_ which is a blank version ready to be fill. and _fcp\_1\_prepose\_uhc\_lou\_oderkerken\_20230111.pdf_ which is the same file filled by pdf.js express, on my computer, when i open this completeed file with pdf.js express it render as in the image “bad rendering” is that helping you ?

 ![bad_rendering_pdf](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/1/19421a67504026f5684c352ae202138b0ccf6071.jpeg)

[fcp\_1\_prepose\_uhc\_lou\_oderkerken\_20230111 (1).pdf](https://pdfjs.community/uploads/short-url/2CBjg5iPBf6QDCbrZ0K3RXdclxD.pdf) (425.8 KB)  
[fcp\_1\_prepose\_uhc.pdf](https://pdfjs.community/uploads/short-url/iKmWkIEyevdboO1bGjIFoy2kwqP.pdf) (387.1 KB)

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 11, 2023, 5:15pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/4 "2023-01-11T17:15:29Z")

</div>

Thank you for those documents.

While testing the form on the PDFjs Express Demo site ([PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo)) the checkboxes are being rendered correctly. Can you confirm this?

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 5:21pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/5 "2023-01-11T17:21:34Z")

</div>

This is what i got when I try, so no, i want it to show as tick on green gb !  
By investigating the code i guess that it’s rendering as Radio and not as checkboxes

 ![Capture d’écran 2023-01-11 à 18.19.52](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/8/8f944feb4b0eaebd9a0d50abb2411777f05321de.jpeg)

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 11, 2023, 5:25pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/6 "2023-01-11T17:25:26Z")

</div>

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/b/bdf23ab1378761debeba87f9e03688a1528d35a6.jpeg)

This is with unfilled form on the demo site. The checkboxes are ticked with a green background.

I think you are correct that somewhere in your code you are setting clicked checkboxes as radio buttons.

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 5:27pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/7 "2023-01-11T17:27:26Z")

</div>

The unfilled form work as expected, the issue is only on the filled one, I sended you the unfilled one to show you the difference, what do you have when you try with the filled one ?

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 11, 2023, 5:39pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/8 "2023-01-11T17:39:30Z")

</div>

Ah sorry for the misunderstand. Yes I can see that in express the checkboxes are being rendered as radio buttons.

Can you share with me how you are saving and downloading the file created with express?

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 6:04pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/9 "2023-01-11T18:04:11Z")

</div>

Sure,  
First I need to add that when you open the file with “preview” (apple) or abobe reader it is render as checkbox correctly.  
To explain the process, I get the file from S3 with python on my back end and then i converted it to base64 and pass it ton my js as such :  
DOWNLOAD :

```javascript
WebViewer({
        path: '/static/formation/PDFJSExpress/lib', // path to the PDF.js Express'lib' folder on your server
        licenseKey: 'Insert commercial license key here after purchase', 

        disabledElements: [
            // 'viewControlsButton',
            // 'viewControlsOverlay',
            // "fitButton",
            // "leftPanelButton",
            // "shapeToolGroupButton"
            "toolbarGroup-Annotate",
            "toolbarGroup-Shapes",
            "toolbarGroup-Insert",
            "viewControlsButton",
            "toggleNotesButton",
            "selectToolButton",
            "panToolButton",
            "crossStampToolButton",
            "checkStampToolButton",
            "rubberStampToolGroupButton",
            "eraserToolButton"
        ],
    }, document.getElementById('viewer'))
        .then(instance => {
            instance.UI.setLanguage('fr');

            instance.UI.loadDocument(base64ToBlob('{{base64_string}}'), { filename: 'myfile.pdf' });
});

```

Python code:

```javascript
@staticmethod
def pdf_to_base64_on_s3(bucket, pdf_file_name):

        s3 = boto3.resource(
            service_name='s3',
            region_name='eu-west-3',
            aws_access_key_id=os.environ['AWS_ACCESS_KEY_ID'],
            aws_secret_access_key=os.environ['AWS_SECRET_ACCESS_KEY']
        )

        # s3 = boto3.client('s3', aws_access_key_id=os.environ['AWS_ACCESS_KEY_ID'], aws_secret_access_key=os.environ['AWS_SECRET_ACCESS_KEY'])
        obj = s3.Object(bucket, pdf_file_name)

        string = obj.get()['Body'].read()

        b64_encoded_pdf = base64.b64encode(string).decode('utf-8')

        return b64_encoded_pdf

```

SAVING:  
To save I use the API to merge the pdf and after that I convert the blob into a js file container to assign it to a file input in a post form to retreive my document in my backend to save it on S3 and in my database :

```javascript
function saveBlobToServer(blob) {

        var file = new File([blob], "{{formation_name}}");

        let container = new DataTransfer();
        container.items.add(file);

        console.log(container)

        file_input = document.getElementById("id_pdf-pdf");

        file_input.files = container.files;
        console.log(file_input.files)

        document.getElementById("form-view").classList.toggle('hidden')
        document.getElementById("button-view").classList.toggle('hidden')

    }

// This in in the WebViewer wrapper 
const { documentViewer, annotationManager } = instance.Core;

            // a callback function to some "download" button
            document.getElementById("send").addEventListener("click", () => {

                const onSave = async () => {
                    document.getElementById("spinner").classList.toggle("hidden")
                    document.getElementById("send").disabled = true;

                    const xfdf = await annotationManager.exportAnnotations({ links: false, widgets: true });
                    const fileData = await documentViewer.getDocument().getFileData({});
                    const blob = new Blob([fileData], { type: 'application/pdf' });

                    const data = new FormData();
                    data.append('xfdf', xfdf);
                    data.append('file', blob);
                    data.append('license', "");

                    // Process the file
                    const response = await fetch('https://api.pdfjs.express/xfdf/merge', {
                        method: 'post',
                        body: data
                    }).then(resp => resp.json());

                    const { url, key, id } = response;

                    // Download the file
                    const mergedFileBlob = await fetch(url, {
                        headers: {
                            Authorization: key
                        }
                    }).then(resp => resp.blob())

                    // Do something with blob...
                    // save(mergedFileBlob)

                    saveBlobToServer(mergedFileBlob);
                }
                onSave()
            });

```

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 11, 2023, 8:02pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/10 "2023-01-11T20:02:40Z")

</div>

Thanks for that.

After reviewing the XFDF it looks like a radio button flag is being added, explaining the incorrect behaviour.

I’ve created a bug ticket to be worked on internally, I will let you know once this issue is fixed.

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 11, 2023, 8:38pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/11 "2023-01-11T20:38:33Z")

</div>

Thank you, How many time do you expect this ticket to be fixe ?

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 12, 2023, 6:38pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/12 "2023-01-12T18:38:39Z")

</div>

Unfortunately I do not have a timeline for when this will be fixed.

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 13, 2023, 4:10pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/13 "2023-01-13T16:10:55Z")

</div>

Can you confirm me that this issue appear with the reader, that is, when a document is loaded ? when it will be fix, event with document that had been filled, they will render correctly ?

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 13, 2023, 5:05pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/14 "2023-01-13T17:05:57Z")

</div>

Yes, when fixed, the checkboxes will render correctly.

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 16, 2023, 8:45am UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/15 "2023-01-16T08:45:24Z")

</div>

Hello, while waiting for the fix I bougth the premium packages but hte watermark does not disseapear, can you help me ?

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 16, 2023, 3:31pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/16 "2023-01-16T15:31:52Z")

</div>

Of course, the watermark will persist in localhost environments but will disappear in production.

Is this your case?

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 16, 2023, 3:53pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/17 "2023-01-16T15:53:51Z")

</div>

No it stay on production, I also use the API to merge anootation and the watermark is not here so it works well !

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 16, 2023, 4:05pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/18 "2023-01-16T16:05:10Z")

</div>

And you are using the new bought license key in the constructor?

```javascript
import WebViewer from '@pdftron/pdfjs-express'

WebViewer({
   licenseKey: "YOUR_KEY_HERE",
   ...
})

```

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

---

<div class="post-metadata">

**Author:** ![henri.piot](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@henri.piot](https://pdfjs.community/u/henri.piot)\
**Post date:** [January 16, 2023, 4:13pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/19 "2023-01-16T16:13:23Z")

</div>

Yes of course, as I said, i’ve done the same thing than the API licence key and it worked perfectly

---

<div class="post-metadata">

**Author:** ![zserviss](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zserviss](https://pdfjs.community/u/zserviss)\
**Post date:** [January 16, 2023, 5:58pm UTC](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289/20 "2023-01-16T17:58:00Z")

</div>

Sorry I am a little confused by what you mean with the API license key?

Best Regards,  
Zach Serviss  
Web Development Support Engineer  
PDFTron Systems, Inc.

[Next page](https://pdfjs.community/t/render-radiobutton-when-checkbox-is-filled/2289.md?page=2)