Time difference in Repeater Field

By: Tania Watts | Asked: 06/20/2022
ForumsCategory: How-toTime difference in Repeater Field
Tania Watts asked 2 years ago
I have a repeater field with a Start Time and End Time. I need to calculate the number of hours between the two and have tried to follow this in the Knowledge Base: https://formidableforms.com/knowledgebase/javascript-examples/#kb-calculate-time-difference Where exactly should I place that Javascript? I'm coding a child theme in Wordpress.   I popped it into a custom.js file and then used this code:  
add_action('wp_enqueue_scripts', 'resources_enqueue_custom_js');
function resources_enqueue_custom_js() {
wp_enqueue_script('custom', get_stylesheet_directory_uri().'/custom.js', array('jquery'), false, true);
Any help would be greatly appreciated.
Question Tags:
1 Answers
Victor Font answered 2 years ago

Your action loads the jQuery globally. If you want it to load only for your form, you can place the jQuery in the After Fields area on the form's Customize HTML Page.

I'll bet your code works for the first row of the repeater and then it stops working. Is that correct?

The code you are using will work on forms without repeaters. Repeaters are actually embedded forms. Subsequent rows are single form entries that are created through Ajax and attached to the embedded form. jQuery is loaded when the page is fully rendered in the browser when it is initially loaded into the page's HTML Document Object Model (DOM). Because subsequent repeater rows don't exist in the DOM until later when they are created through Ajax, the jQuery cannot interact with these new rows until it is reinitialized for the newly remodeled DOM. See this article to learn how to reinitialize the jQuery so it works for all repeater rows. https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/

Tania Watts replied 2 years ago

Thanks Victor for your quick response. I have removed the add_action() code and placed the in the After Fields box for the form. It does not seem to trigger on the change event of either time field.

After some further debugging I found that there is not a single field #field_hlbr1
but it is split into hours and minutes in the front end.
I see #field_hlbr1_H an d #field_hlbr1_m

Do you think that the same code needs adjusting to work?

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