Jump to content

Form JQuery Not Working When Lightbox Is Used

Recommended Posts

Hi there,

I have injected some JQuery code into my page in order to set a few conditional fields within a form. The conditional fields are triggered depending on the selection from a radio button as shown below:

1121343217_Screenshot2022-01-25at09_54_17.thumb.png.ab680cf50a0ba12ac06bc37bfa62884c.png

As you can see when a number other than 0 is selected the conditional fields get displayed.

631115611_Screenshot2022-01-25at09_54_33.thumb.png.44350974391ece11fe87f6600d738215.png

The form works perfectly as expected but the problem is when I switch to form to a lightbox the JQuery seems to stop working and the conditional fields do not appear, no matter the selection.

1770270005_Screenshot2022-01-25at09_55_06.thumb.png.0174541b361b8b2148b98ba9745aa719.png

What am I missing here? Any help on this would be appreciated 🙂 

 

Link to comment

The code must wait until the form has loaded, not the page. When the form is on the page, both load at the same time but when it is a lightbox form it won't be added to the page until the form is launched.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
19 hours ago, paul2009 said:

The code must wait until the form has loaded, not the page. When the form is on the page, both load at the same time but when it is a lightbox form it won't be added to the page until the form is launched.

Thanks Paul, would you have an example of code that would work for recognising if the form is launched or not? I have tried these examples below so far:

$('#yui_3_17_2_1_1643211118624_394').on( "load", function() {
        
});
if($('#yui_3_17_2_1_1643211118624_394').is(':visible')){

}

 

Link to comment

It's more complex than that 🙂. You'll need a Mutation Observer to detect the changes. 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.