SIGN UP

Showing a Repeater Section Conditionally is overwriting Custom Javascript Show/Hide

By: paulus macaulus | Asked: 07/14/2023
Forums › Category: General questions › Showing a Repeater Section Conditionally is overwriting Custom Javascript Show/Hide
0 Vote Up Vote Down
paulus macaulus asked 1 year ago
Hi, I have a Repeater in a form that I need to have hidden initially and then show when the conditions have been met to do so. This is working as it should however, within the repeater, I have a radio button with two options, "Single Share" or "Twin Share" to select the room type. Text fields for First Name and Last Name are required. These text fields are hidden initially until a selection on the radio button is made, Single shows 2x text fields for First and Last Name, and Twin shows 4x text fields 2 for First Name, 2 for Last Name. The behaviour has been created in javascript as it is more complex than formidable's conditions can handle. No conditional formatting has been applied to any of the fields within the repeater, only the repeater itself (acting as a Section). The formidable Conditional to show the repeater "Section" if other things have happened in the form is working but it is also showing the text fields that should not show and have been hidden by custom javascript. Does anyone know how to have these text boxes not be shown when the repeater wrapper gets triggered and only when the javascript shows and hides the fields based on the users choice. Any help is appreciated. Paul
Rob LeVineRob LeVine replied 1 year ago

I've had no luck combining Formidable's conditional logic with jQuery for the same field. I've found that if you have jQuery conditional logic on a field it will likely lose out to the Formidable logic, though that might depend on whether you use Before Fields or After Fields. The only solution I've found is to do all the conditional logic in jQuery, though that's easier said than done because it could have unintended consequences.

3 Answers
0 Vote Up Vote Down
paulus macaulus answered 1 year ago
Hi, Thanks for your reply Rob, as is usually the case for me, time restraints forced by the client wanting something working have made me adjust my approach. Using pagination instead of conditional logic in the form has worked to deliver the desired functionality needed this time. 
0 Vote Up Vote Down
Victor Font answered 1 year ago
jQuery isn't working because it has to to with the HTML Document Object Model (DOM), jQuery binding, and hidden elements. jQuery cannot bind to hidden elements. When your section is hidden, so are the fields you want to manipulate with jQuery. They are effectively removed from the DOM until they are shown. You either have to reinitialize the jQuery when the fields are shown like we do with adding repeater rows or use a different approach altogether. This article about repeaters and how the DOM works with jQuery may give you insights on how to fix your issue. There is reinit code in this tutorial that you can leverage. https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/
0 Vote Up Vote Down
paulus macaulus answered 1 year ago
Hi Victor, Im sure Chet (ChatGPT4) will be able to work it out and i’ll get him to take a look. Everything was working until the repeater was conditionally hidden,  the functionally was still working mostly , it’s just that the fields were shown along with the rest of the fields in the repeater as opposed to those text fields to enter a name all being hidden and only revealing after someone had selected  single or twin share, allowing one first & last name or two to be entered. Paginating the form allowed the text fields to remain hidden. Client has seen it and likes it better as i put in a summary field, hopefully people will check before committing  to sometimes thousands of dollars to book only 25%of the overall.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right