Forms with conditional logic don't work

Question

In our SXA environment we created a form with conditional logic. Depending on the selection in a list of radio buttons, only certain form sections should be visible in the form.

At first, we got an "jQuery is not defined" error. With these tips we were able to fix that error. But the conditions didnt work. We noticed, that the function

$formEl.init_fxbConditions(options);

in the adaption was not executed, because that following test

if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {

}

fails.

In an old sitecore installation without sxa, the conditional form logic works. In difference to the sxa environment the form scripts are referenced in the head section and not in the body.

Now I´ve tried to move the scripts from the body into the head. The form scripts are referenced in the MetaData partial design. The attempt to move it within the MetaData partial design was unsuccesful. The only way to move the scripts into the head was a HTMLSnipped that I placed in the head section of the MetaData partial design. I guess, this code

@foreach (string script in assetLinks.Scripts)
{
    @Html.Raw(script)
}

within the SxaLayout.cshtml is cause of the fact, that scripts are rendered to the body and not into the head section.

If the scripts are rendered within the head section, the conditional logic works!

Is there an easier way to execute conditional forms logic in sxa renderings?

Thanks a lot Uwe

Answer 1

I was running into similar issue.

Issue here is that forms is using jquery-2.1.3 and SXA using xaquery which are conflicting.

Update forms script to avoid conflict. Also, not need of moving the scripts to head, leave them in body-bottom which is actually rendered from Metadata partial design.

C:\inetpub\wwwroot\website\Views\FormBuilder\Form.cshtml

<script type="text/javascript">
    (function () {
         function initialForm($) {
           var $formEl = $("form[data-sc-fxb='@Model.ItemId']");
           if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {
               var options = @Html.RenderConditions(Model);
               $formEl.init_fxbConditions(options);
           }
         }
        window.addEventListener('load', function () {
           initialForm($);
        });
    })();
</script>

My earlier script was

window.addEventListener('load', function () {
           initialForm(jquery);
        });

Answer 2

This workaround only works if it's a form with a single page.

If the form has more than one page and also has conditions on the 2nd page, we solved it as described in the aswer SXA destroys the window context used by the conditional logic of forms