Force toggle open if there are entries in repeater field?

By: Chris Andrews | Asked: 10/19/2022
ForumsCategory: General questionsForce toggle open if there are entries in repeater field?
Chris Andrews asked 1 year ago

Hi, 

I have a toggle that when triggered, opens a repeater field for entries (repeater field conditional logic, if toggle=yes, open repeater field). 

I'd like to find a way to force that toggle to remain open (and keep the repeater fields displayed) as long as there are entries in the repeater field.

Have it so that the only way the toggle can be set to 'off/no' after entries are made in the repeater field is if the user deletes all of the entries in the repeater field. 

Any thoughts on how I might do that? 

Thanks, 

Chris

1 Answers
Best Answer
Rob LeVineRob LeVine answered 1 year ago
There's nothing native to support that as far as I know.  It screams for a jQuery solution where you count the number of rows in the repeater field and enable/disable the toggle based on 0 or more rows.
Chris Andrews replied 1 year ago

Thanks Rob, the problem I'm having is that if the toggle is turned off, everything in the repeater fields is deleted. Sometimes users just closed it to retract the repeater fields so they don't show while the rest of the form is completed... and the user only finds out later that closing the toggle erased their entries. I'm not sure if that's the way it's intended to work or not, but it's not a good user experience...

Rob LeVineRob LeVine replied 1 year ago

That seems crazy, so there must be something else going on. Can you send me a link to check it out? If you want to do it privately you can send me a message through this community (https://connect.formidableforms.com/messages/).

Chris Andrews replied 1 year ago

I checked in with support on this, they said it was default behavior. From support: "When a field is hidden using conditional logic, the data entered in the field is lost."

They said they have an alternative method to show/hide a section though, that doesn't delete the content. It's here: https://formidableforms.com/knowledgebase/javascript-examples/#kb-conditionally-hideshow-a-field

That code gets added to the 'after fields' section under settings > custom-html, according to the email I received.

It's jquery, as you suggested. I'm testing the code right now, and it opens the hidden field upon toggle, but once it's open, it won't close when the toggle is moved to 'no'. I'm inexperienced with jquery, it looks right to me, but something isn't working.

jQuery(document).ready(function($){
// Hide field by default
$("#frm_field_89_container").css('display','none');

$("input[name='item_meta[93][]']").change(function(){
var show;

var val1 = $("input[name='item_meta[93][]']").val();
if (val1 == 'Yes')
{show = true;}
else if (val1 == 'No')
{show = false;}

if(show){
$("#frm_field_89_container").css('display','block');
}else{
$("#frm_field_89_container").css('display','none');
}
});
});

Sorry, I don't have a way to give you a public link to the form, it's in a members only area,

Chris

Rob LeVineRob LeVine replied 1 year ago

Sorry, but I won't be able to debug that without seeing it for myself. You can use the browser's developer tools (F12) to debug inline or use console.log() statements to output stuff to the debug console and see what is and isn't happening.

Chris Andrews replied 1 year ago

Oh, I realized I could just recreate it on a public page, I dumped all the rest of the form so we only have to look at the actual problem - It opens okay, just won't close now. I appreciate your help with this Rob!

Rob LeVineRob LeVine replied 1 year ago

Try this instead. The "value" is always "Yes", regardless so you really can't use that. Note: Even though it looks like the logic is backward (false => show and true => hide) it's because the "aria-checked" attribute doesn't change until the toggle change action is complete.

jQuery(document).ready(function($){
$("#frm_field_104_container").css('display','none');
$("input[name='item_meta[103][]']").change(function(){
var show;
var val1 = $("#field_dzahx2").next().attr("aria-checked");
if (val1 == 'false')
{show = true;}
else if (val1 == 'true')
{show = false;}
if(show){
$("#frm_field_104_container").css('display','block');
}else{
$("#frm_field_104_container").css('display','none');
}
});
});

Chris Andrews replied 1 year ago

That is working PERFECTLY!!!

Thank you so much for your help with this Rob, I really appreciate it!

Chris

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