mark joon asked 2 months ago
I am making a calculator and i need every option to have 2 values, but now it can only have 1... I tried creating a hidden field for each of my 3 of my radiobutton options with chatgpt, he made me add the following in extra css but it wont work, any other ideAS?
document.addEventListener('DOMContentLoaded', function () {
// Select the radio buttons for each field
const radioButtons36 = document.querySelectorAll('input[name="item_meta[36]"]');
const radioButtons30 = document.querySelectorAll('input[name="item_meta[30]"]');
const radioButtons37 = document.querySelectorAll('input[name="item_meta[37]"]');
// Hidden fields
const subsidyField142 = document.getElementById('field_142'); // Hidden field ID 142
const subsidyField143 = document.getElementById('field_143'); // Hidden field ID 143
const subsidyField144 = document.getElementById('field_144'); // Hidden field ID 144
// Subsidy data for each product
const subsidyData36 = {
'UHMO-044STES (4 kW)': '€ 2,775.00',
'UHMO-080STES (8 kW)': '€ 2,925.00',
'UHMO-100STES (10 kW)': '€ 3,375.00',
'UHMO-120STES (12 kW)': '€ 3,525.00',
'UHMO-140STES (14 kW)': '€ 3,675.00',
'UHMO-160STES (16 kW)': '€ 3,975.00',
};
const subsidyData30 = {
'DHP-070-050-M290 (6 kW)': '€ 3,196.25',
'DHP-090-070-M290 (8 kW)': '€ 3,345.00',
'DHP-130-010-M290 (10 kW)': '€ 3,941.25',
'DHP-130-010-M290t (12 kW)': '€ 4,018.75',
'DHP-170-130-M290t (14 kW)': '€ 4,403.75',
};
const subsidyData37 = {
'UHP-044SPOD + UHPW-044SPID (4 kW)': '€ 2,775.00',
'UHP-060SPOD + UHPW-060SPID (6 kW)': '€ 3,100.00',
'UHP-080SPOD + UHPW-080SPID (8 kW)': '€ 3,250.00',
'UHP-120SPOD + UHPW-120SPID (12 kW)': '€ 3,400.00',
'UHW-090UCSDP + UHM-160UXCSAPA3 (9 kW)': '€ 3,550.00',
'UHW-120UCSDP + UHM-160UXCSAPA3 (12 kW)': '€ 3,700.00',
'UHW-140UCSEP + UHM-160UXCSAPA3 (14 kW)': '€ 3,850.00',
'UHW-160UCSEP + UHM-160UXCSAPA3 (16 kW)': '€ 4,150.00',
'UHP-160SPOD + UHPW-160SPID (16 kW)': '€ 4,000.00',
};
// Function to update the hidden field based on selected radio button
function updateSubsidy(radioButtons, subsidyField, subsidyData) {
if (!radioButtons || !subsidyField) {
console.error('Invalid field(s)');
return;
}
radioButtons.forEach(button => {
button.addEventListener('change', function() {
const selectedText = this.nextElementSibling.textContent.trim(); // Get the text of the selected radio button
subsidyField.value = subsidyData[selectedText] || '';
});
});
}
// Attach event listeners for each field
updateSubsidy(radioButtons36, subsidyField142, subsidyData36);
updateSubsidy(radioButtons30, subsidyField143, subsidyData30);
updateSubsidy(radioButtons37, subsidyField144, subsidyData37);
// Initial update on page load
updateSubsidy(radioButtons36, subsidyField142, subsidyData36);
updateSubsidy(radioButtons30, subsidyField143, subsidyData30);
updateSubsidy(radioButtons37, subsidyField144, subsidyData37);
});
Or any other ideas how to solve it?
Victor Font answered 2 months ago
mark joon
replied 2 months ago No but i need another value. I need an option name, a price and a subsidy amount.
But i cant add subsidy amount with built in features sadly
Victor Font
replied 2 months ago I had an AHA moment thinking about this 2-value radio button requirement. It struck me you can use HTML data properties to add as many values as you want to radio button options by customizing the template on the form's customize HTML page.
mark joon
replied 2 months ago Okay Victor sounds good! How would i do this? Any steps or any guide somewhere?
Would help.me a lot. Thanks in advance!!
Victor Font
replied 2 months ago Edit the radio button input as in #4 here: https://formidableforms.com/knowledgebase/checkboxes-radio-buttons/#kb-display-text-in-between-options.
Add the data property:
[input opt=1 data-subsidy="200"]
[input opt=2 data-subsidy="400"]
[input opt=3 data-subsidy="600"]
This will add the data property to the generated HTML where you can access it with jQuery and use it in your front end calculations.
You can also populate the subsidy amount with a custom shortcode instead of hard coding the values.
mark joon
replied 2 months ago Okay il try, im not too good with all this stuff, so its still hard for me to know exactly what to do.
[field_name]
[required_label]
[input]
[if description][description][/if description]
[if error][error][/if error]
This is the code of 1 of the radio button options.
Which has the following values, which are included in the formidable forms:
UHMO-044STES (4 kW)|2750
UHMO-080STES (8 kW)|2900
UHMO-100STES (10 kW)|3250
UHMO-120STES (12 kW)|3450
UHMO-140STES (14 kW)|3750
UHMO-160STES (16 kW)|3950
And then the third option for the subsidy amounts should be (in this order):
2775
2925
3375
3525
3675
3975
So maybe like this?:
[input opt=1 data-subsidy="2775"]
[input opt=2 data-subsidy="2925"]
[input opt=3 data-subsidy="3375"]
[input opt=4 data-subsidy="3525"]
[input opt=5 data-subsidy="3675"]
[input opt=6 data-subsidy="3975"]
so like this then?:
[field_name]
[required_label]
[input opt=1 data-subsidy="2775"]
[input opt=2 data-subsidy="2925"]
[input opt=3 data-subsidy="3375"]
[input opt=4 data-subsidy="3525"]
[input opt=5 data-subsidy="3675"]
[input opt=6 data-subsidy="3975"]
[if description][description][/if description]
[if error][error][/if error]
And then after this somehow have to take the values?
mark joon
replied 2 months ago <p><p>Okay it somehow fked up what i wrote.. I had put it in the code but cant i guess.Anyway i tried it and the wholke calculator styling got messed up. So i probably dont know what to do, how to paste those values in the html correctly</p><p>I feel like it shouldnt be so difficult but it is, just a simple third value for an option :(</p></p><p> </p><p> </p><p>Here it keeps adding code stuff to my messages automatically weird</p>
mark joon
replied 2 months ago <p>Maybe i should just add like 40 hidden fields for all the subsidies and have conditional logic of each radio option activate 1 of those 40 hidden subsidy fields, will be alot of work and a mess but it would atleast work..</p><p> </p><p> </p><p>Thats how i did it for all the other parts, cause they have a lot less options:</p><p> </p><p> </p>
Victor Font
replied 2 months ago I would never recommend creating 40 hidden fields. data-properties or Ajax for real time lookup is the most efficient.
Victor Font
replied 2 months ago There are many devs here that may be willing to teach you for a fee.
mark joon answered 2 months ago
Okay i managed to have the subsidy data values into the html for each option. Tried to fill in hidden field with the subsidy using java script but wont work sadly.
Start your code here document.addEventListener('DOMContentLoaded', function () { // Select the radio buttons for field 37 const radioButtons37 = document.querySelectorAll('input[name="item_meta[37]"]'); // Get the hidden subsidy field const subsidyField144 = document.getElementById('field_144'); // Hidden subsidy field ID 144 // Function to update the subsidy field based on the selected value function updateSubsidyField() { radioButtons37.forEach(button => { button.addEventListener('change', function() { // Get the value of the data-subsidy attribute from the selected button const subsidyAmount = this.getAttribute('data-subsidy'); // Fill the hidden field with the subsidy value subsidyField144.value = subsidyAmount; }); }); } // Initialize the function updateSubsidyField(); });
Victor Font
replied 2 months ago Your code is overly complex and just wrong. Formidable does not use field ids like "field_144". You're not picking up the subsidy values.
Please login or Register to submit your answer
