This article explains how to detect changes made inside a Subform Repeater Element using the Custom HTML element. |
Getting Subform Repeater Plugin. Source Code of the plugin can be found at https://github.com/jogetoss/subform-repeater.
The subform form consists of a hidden field as a Foreign Key to connect both Parent and Subform forms, elements depending on the use case, and two Custom HTML elements to wrap the Subform Repeater in a container and script to detect changes.
Figure 1: Subform Configuration
Wrap the elements in a div class in the first Custom HTML element using the HTML code below.
Figure 2: Wrap Elements in Div Class
<div class="link-container" style="padding-left:30%;"></div> |
The second Custom HTML will handle any changes made in the original text and will create a new link based on the new text entered.
Figure 2: Script to Detect Changes and Create New Link
Below is the script used:
<script type="text/javascript">
$(document).ready(function() {
// Use event delegation to ensure the event handler is attached only once
// to the parent container of all the subform rows
$(document).on('change', 'input[id$="_SR_url"]', function() {
if (!this.changeHandled) {
alert("URL Changed");
createURL(this); // Pass the current element to the createURL function
this.changeHandled = true; // Mark this change event as handled
}
});
function createURL(inputElement) {
var val = $(inputElement).val();
var newVal = "<a href='" + val + "' target='_blank'>" + val + "</a>";
// Locate the closest repeating section container for this URL field
var $sectionContainer = $(inputElement).closest('.subform-section');
// Within that container, find the link container (no longer using the ID)
var $linkContainer = $sectionContainer.find('.link-container');
// Update the HTML of the link container with the new link
$linkContainer.html(newVal);
// Reset the handled flag after a short delay
setTimeout(function() {
inputElement.changeHandled = false;
}, 100);
};
});
</script>
</script> |
$(document).on('change', 'input[id$="_SR_url"]', function() will target any ID with the SR_url on its name, this has been done by looking up the URL ID using the inspect tool, as per the screenshot:
|
In the Parent form, we only need the Subform Repeater Element. Set the id as 'SR' following the code above and point to the subform form created.
Figure 3: Subform Repeater in the Parent Form
Enter text in the URL field and click save. A URL based on entered text will appear underneath the URL field.
Figure 4: Runtime Test
Changes made in the new row won't disturb the previous row.
Figure 5: Test in New Row
