Harry Carter asked 2 years ago
Hi and Thanks,
I'm trying to get two fields to react to each other depending on what the other is displaying. I have a number field and a % field. the number field always starts out as the equivalent of 100% but can be any number. That would be field 403. Field 506 initially displays as 100% of whatever field 403 displayed at but as I said, if either changes than the other changes. So if I have field 403 value of 1000 and 506 value of 100%, then I change 403 to 500, then 506 needs to show as 50 or 50%. But if I change field 506 value of 50 back to 100 or 100%, then field 403 changes to 1000 again. I do have a script but don't quite know where or how to enter Formidable's field ids... or even if this will work. Help!
// Wait for the document to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get references to the fields
var field403 = document.querySelector('#field403');
var field506 = document.querySelector('#field506');
// Get the initial default value of Field 403
var initial403Value = parseFloat(field403.value);
// Calculate the initial percentage value for Field 506 based on the initial default value of Field 403
var initial506Value = 100;
// Set the initial value of Field 506 to the calculated percentage
field506.value = initial506Value;
// Add event listeners to the fields
field403.addEventListener('input', updateFields);
field506.addEventListener('input', updateFields);
// Function to update the fields based on user input
function updateFields() {
// Get the current values of Field 403 and Field 506
var current403Value = parseFloat(field403.value);
var current506Value = parseFloat(field506.value);
// If Field 403 changes, update Field 506 based on the new value
if (current403Value !== initial403Value) {
var percentage = (current403Value / initial403Value) * 100;
field506.value = percentage.toFixed(2);
}
// If Field 506 changes, update Field 403 based on the new percentage
else if (current506Value !== initial506Value) {
var newValue = (current506Value / 100) * initial403Value;
field403.value = newValue.toFixed(2);
}
}
});
In this script, you'll need to replace #field403 and #field506 with the appropriate IDs or selectors for the actual field elements in your form. Additionally, ensure that you include this script on the page where the form is displayed.
The script sets up event listeners for both fields, so whenever either field is updated, the updateFields function is called. This function checks if Field 403 or Field 506 has changed and performs the necessary calculations to update the other field accordingly.
Remember to adjust the script to match your specific field IDs and any additional logic or validation requirements you may have.
Please login or Register to submit your answer
I suggest you reach out to someone on the Formidable Masterminds directory to whom you can give access and have them debug the issue. https://formidable-masterminds.com/developers-directory/