Auth0 Form - HTML Custom Field not submitting

Get Help
,
1

Hi Community.
I am creating an Auth0 form where I am using HTML Block widget to create a custom component with HTML, JS & CSS. Reason for going with custom build is because I need to show hide a text field which takes a number from user based on the radio button. I also have other fields like firstname, lastname, DOB etc. When that form is submitted in the network call, I can see other fields created using OOTB widget are part of payload. But my custom text field accepting number is not submitted and hence the next step (Auth0 Flow) where I validate that number via an API call doesn’t receive the number user inserted in the form.

How to fix this ?

2

Hi @rbAuth0,

Welcome to the Auth0 Community!

Can you share the more details regarding this custom field component.

Thanks
Dawid

3

Hi @dawid.matuszczyk

The custom field is created using “HTML” block component where I add CSS, jS and HTML required for my custom component.

Eg.

Temporary card number

Enter the 13-digit number on the Rewards Card or in the app

And above is shown/hide based on radio button selection via js

const yesRadio = document.getElementById(“yesRadio”);
const noRadio = document.getElementById(“noRadio”);
const tempCardNumberSection = document.getElementsByClassName(“tempCardNumberSection”)[0];
yesRadio.addEventListener(“change”, () => {
tempCardNumberSection.style.display = “block”;
});

noRadio.addEventListener("change", () => {
  tempCardNumberSection.style.display = "none";
});

All js/css are written under same HTML block component.
when the form is submitted radio button and tempcard text field values are not submitted.

4

@rbAuth0,
Were you able to find any workaround for this issue?

I’m working with a fully custom form built using an HTML block (not the built-in components), and I’m running into the same problem. If you managed to handle the submission, could you share how you approached it?

Also, did you figure out how to access the var, fields, context, or actions variables within the <script> block?