when we have two forms in the same page, the toggle checkbox doesn't work in the second form about formbuilder HOT 7 OPEN

This is the browser applying the checked flag when the label is clicked on. The label for the checkbox group includes the 'for' attribute and the duplicate ids mean the event is forwarded to the first element of that id. The for attribute can be removed for toggles however there are other javascript errors seen in formBuilder when you have two checkbox fields with the same name.

@kevinchappell Removing the for attribute for toggles is simple enough, generates valid HTML and the toggles will work. However I don't believe we should be fixing any other duplicate ID issues since it is invalid markup.

from formbuilder.

Can you please provide a reproduction and some screenshots? I cannot replicate.

Is this with formBuilder or formRender?

from formbuilder.

Hi @lucasnetau

It's actually renderer issue, I wasn't clear

https://codepen.io/maysam-the-scripter/pen/poBybPK

here is a demo, when you try to toggle the checkbox in the second form, it toggles the ones in the first form
it works fine when checkbox is not in toggle mode though

from formbuilder.

You have the same ID for the control in both forms. So the selector is picking up the first control of that ID. Please adjust your form control ids so that you have valid HTML.

from formbuilder.

when this need to be localized, also this is only happening for the toggle, and other fields don't have this problem

in my application, I am rendering same form 4 times and this problem only happens when I turn on the toggle for checkboxes

from formbuilder.

We can investigate if the selector can be reduced to target the expected control.

However it still holds that duplicate IDs in a single HTML page is invalid and you cannot expect anything to work. Giving a unique name in the formData JSON prior to render is a quick method (Array.map and append form-- to the name of each control field)

from formbuilder.