Julius hernández asked 2 years ago
My goal is to have a Dynamic field in checkboxes mode and to iterate in its checkboxes. Then assign the first checked checkbox to a text field label (not in its value) and the second checked checkbox to a second text field label.
I wrote this little code with obvious misreferences, may you help me to polish it?
gscont_elements is the dynamic field set as checkboxes.
Every time a checkbox is checked or unchecked, the code must iterate through all options and assign the first checked option to the label of field gscont_title_text1 and the second checked option to the label of field gscont_title_text2.
<script type="text/javascript">
jQuery(document).ready(function($){
var dynamic_field = document.getElementById("field_gscont_elements");
var checkboxes = document.getElementById("field_gscont_elements");
$(dynamic_field).change(function(){
for (var i = 0, n = checkboxes.length; i < n; i++){
if (this.checked) {
var val1 = this.text().trim(); // get option label??
// << set first checked label to value of field "gscont_title_text1" >>
// << set second checked label to value of field "gscont_title_text2" >>
// << additionally,limit checked boxes to 2 >>
}
}
}
}) ;
</script>
I'm still checking how to change the labels of fields. Any help will be appreciated.
Victor Font answered 2 years ago
@Julius hernández : Your jQuery is more complex than it needs to be. You can eliminate the var declarations at the top entirely. You don't need them. You can bind to the field's change event with:
$('#field_gscont_elements').on('change', function()});
With jQuery.on() you can bind the same callback function to multiple events. Next, you can loop through the checkboxes using:
$(this).each(function(){});
The value of the dynamic field is not important to accomplishing your goal. Dynamic field values are the entry IDs of the displayed record. The text() function reads the text of HTML elements, not field objects. If you examine the field's generated HTML in your browser's inspection tool, you would see that dynamic inputs are wrapped by label elements. The actual input is a nested element. The label element contains the text you want to extract. There are two ways to access the label element, you can first retrieve the input ID for the checked field, then the label is accessed with this code:
$('label[for="dynamic_input_id"]').text().trim();
As an example, let's say the input id is "field_n87rx-4193". This is the field id in my test environment. The label is then accessed as:
$('label[for="field_n87rx-4193"]').text().trim();
The alternative to retrieving the input id, because of the nesting, you are able to use parent() and save the initialization of the input id variable step. Code using parent() would be like this example:
$(this).parent().text().trim();
As you loop through the checkboxes with each(function() {});, for each if (this.checked) {} option copy the label text to your text field. You can actually do the reading and writing in a single line of code:
$('#field_text_field_id').val( $('label[for="field_n87rx-4193"]').text().trim() );
Again, using the parent example, writing to the text field will be:
$('#field_text_field_id').val( $("#field_n87rx-4193").parent().text().trim() );
I have a couple of questions.
I also have to mention a caveat of which you should be aware. The entire purpose of dynamic fields is to allow content changes in the connected form's entries. That's why the entry ids are saved as the values. The connection always links back to the original lookup entry so that that entry's content can be displayed dynamically in real time when it changes.
You are writing dynamic content to one or more text fields. If you update any of the dynamic content, these text fields will not reflect the associated dynamic content's current value. They will always display the point-in-time value. You're hard coding it into the entry.
One of the coolest features there is with dynamic lookups is that when displayed in a Formidable View, you can choose to display any and all current value content from the associated entry in real time. You don't mention what type of dynamic data you're using, so I'm going to share a real-world example.
I've built quite a few WorkFlow engines. Much workflow content needs to be fueled by dynamic lookup tables, especially where high levels of security are required. Sometimes you have to integrate employee details with enterprise HR systems for real time or batch updates. In a dynamic enterprise organization, positions and roles change all the time. You always have to reflect the current org chart when assigning workflow approval or task requests. This requires dynamic fields, a method for maintaining their truthfulness, and a history log for back tracing and follow-up.
When you build a View around this dynamic data, you can use the same field shortcode repeatedly to display any field or field combination you want from the lookup entry. Suppose we're building a training management system, and you need to lookup an instructor or class through a dynamic field. Class locations change regularly and so do instructors. Where the form only displayed a name or class ID, the view can show full contact or location details in real time from the lookup record.
As far as checkboxes are concerned with Formidable, the only difference between a standard checkbox field and a dynamic checkbox is the source of the content. The generated HTML is exactly the same. Wrapping the input with the label statement supports accessibility, a positive commitment from the Strategy 11 team.
Hope this helps.
Please login or Register to submit your answer
Michael Clark
By the way, regarding my other question "Limiting number of checked boxes in Dynamic field" (in General Questions), it may be implemented here. The big problem in both is affecting the checkboxes of a Dynamic field.