Victor Font replied 2 years ago

Your code is not correct. You have a mix of straight quotes and curly quotes. Notice how the first few lines are color coded and then the color coding stops, this is an indication that the code is wrong. JSlint your code to find the numerous coding errors. You have almost 20 errors: https://www.jslint.com/

Fabian Pontén replied 2 years ago

Ah ok, I think maybe I fixed those errors now but I'm not sure if this code is correct still? Says something is wrong with the for loop but don't see why. But still, not sure if this code is correct anyway to achieve what I'm trying to achieve?

https://pastebin.com/hSnMMP4n

Thank you so much Victor, hope you have a great weekend!

Victor Font replied 2 years ago

chatGPT wrote code that is completely wrong. Let's walk through your code. Look at this line:

var statementValues = [form.getFieldById("3986").getValue(), form.getFieldById("3988").getValue(), form.getFieldById("3989").getValue()];

You've misidentified all of the fields; "3986", "3988", and "3989" are NOT HTML element IDs. You identify element IDs by examining the HTML in your browser inspection tool. HTML IDs are signified by the id="" in the target element. Formidable does not use field IDs when creating the element's HTML ID. Formidable uses the field key. HTML field IDs are "field_[key]" in Formidable's HTML template. For example, if the field key for field "3986" is "e6lis62", the HTML ID for the HTML input is "field_e6lis62".

We also use jQuery for accessing Formidable elements. Taking you line above and refactoring it for jQuery, it looks like this:

jQuery(document).ready(function($) {
"use strict";
var statementValues = [$("#field_conf_29yf4d2").val(), $("#field_e6lis62").val(), $("#field_9jv0r12").val()];
});

Change the HTML IDs to your IDs.

Fabian Pontén replied 2 years ago

Ah ok very good to know, I put the Field IDs from the fields in the FF form builder.

What about the second part of the code? Will this reorder the fields or is this also wrong you think?

statementFields.sort(function(a, b) {
return statementValues.indexOf(b.getValue()) - statementValues.indexOf(a.getValue());
});

// remove the initial statement fields and add them back in the sorted order
var container = document.getElementById("frm_field_2349_container");

while (container.firstChild) {
container.removeChild(container.firstChild);
}

Also, what about placing them back onto the page after they've been reordered? Any ideas on how to do that? 🤔

Thank you very much!

Victor Font replied 2 years ago

For the rest of this code, you're going to have to figure out how to sort the divs, since the divs do not have a value tied to the input field. The divs use the underlying field ID in the HTML id. This is probably a little confusing since you're depending on AI to write your code. However, understanding how Formidable works will save a huge amount of time in the future.

What this all means is that you need to cross reference the div IDs with the field IDs. The easiest way to do this programmatically is to create an object instead of using an array. The example line from above refactored as an object is:

var statementValues = {"#frm_field_969_container": jQuery("#field_conf_29yf4d2").val(), "#frm_field_970_container": jQuery("#field_e6lis62").val(), "#frm_field_971_container": jQuery("#field_9jv0r12").val()};

This outputs the following object:

Object { "#frm_field_969_container": "3", "#frm_field_970_container": "1", "#frm_field_971_container": "2" }
"#frm_field_969_container": "3"
"#frm_field_970_container": "1"
"#frm_field_971_container": "2"

Victor Font replied 2 years ago

Sorting requires yet another change to the Array of objects. That first line again is now:

var statementValues = [{div: "#frm_field_969_container", value: jQuery("#field_conf_29yf4d2").val()}, {div: "#frm_field_970_container", value: jQuery("#field_e6lis62").val()}, {div: "#frm_field_971_container", value: jQuery("#field_9jv0r12").val()}];

We also need a second array of objects to sort.

var sortedOrder = [{div: "#frm_field_969_container", value: jQuery("#field_conf_29yf4d2").val()}, {div: "#frm_field_970_container", value: jQuery("#field_e6lis62").val()}, {div: "#frm_field_971_container", value: jQuery("#field_9jv0r12").val()}];

Now we have to create a function to sort the array of objects by value:

function compareValues(a, b) {
return a.value - b.value;
}

To sort, we use:

sortedOrder.sort(compareValues);

The rest of the code you need is very complex. As a community volunteer, I do not have the time to spend the next few hours writing and testing code to fix the chatGPT mess it created.

What you need to do is loop through the arrays and use the jQuery.replaceWith() function to replace the divs in order from bottom to top. In order to do this, you have to duplicate the divs themselves with:

var div1 = jQuery("#frm_field_969_container"), div2 = jQuery("#frm_field_970_container"), div3 = jQuery("#frm_field_971_container")

Sorting in this manner does not carry forward the field values. This means you have to reset the values after you perform the replacement.

Working this code out with all of its permutations will take a few hours. If you need the help of a developer, please visit https://formidable-masterminds.com/developers-directory/. I gone as far as I can go as a community volunteer, but at least you're on the right track now.

Fabian Pontén replied 2 years ago

Thank you so much for taking your time Victor to assist me in this issue, I will see if I can figure it out and hire a developer otherwise. Really appreciate it, all the best to you!