Auth0 Form - HTML Custom Field not submitting

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.