Total Price Estimate Based on Drop Downs and Multiple Selects

Hello @redfoxbuilders

Please remove the online comments from the equations code. The plugin minifies the equations code, and the online comment can break the resulting equations. If you want to include comments in the equations, please use block structure Ex.

/* Calculate extra painting cost */

The second issue is caused by the use of fields’ names. The plugin replaces the fields’ names with their corresponding values before evaluating the equations. You should not do it yourself.

So, pieces code like:

var repairs = getField('fieldname22').val();

Must be transformed into:

var repairs = fieldname22;

So, the equation structure would be similar to:

(function () {
    var baseAmount = 300;
    var totalPrice = baseAmount;

    var bedrooms = fieldname16|v;
    var bathrooms = fieldname47|v;
    var propertyType = fieldname18|v;
    var occupied = fieldname17|v;
    var additionalRooms = fieldname20|v;
    var extraPainting = fieldname21|v;
    var doors = fieldname25;
    var windows = fieldname29;
    var repairs = fieldname22;
    var congestionZone = fieldname44;
    var parkingAvailable = fieldname45;

    var bedroomPrices = {
        "0 Bedroom": 0,
        "1 Bedroom": 0,
        "2 Bedroom": 120,
        "3 Bedroom": 260,
        "4 Bedroom": 450,
        "5 Bedroom": 630,
        "6 Bedroom": 800
    };
    totalPrice += bedroomPrices[bedrooms];

    var bathroomPrices = {
        "0 bathroom": 0,
        "1 bathroom": 130,
        "2 bathroom": 250,
        "3 bathroom": 350
    };
    totalPrice += bathroomPrices[bathrooms];

    var propertyPrices = {
        "Flat": 0,
        "Terrace": 0,
        "Semi-Detached": 50,
        "Detached": 50,
        "Other": 0
    };
    totalPrice += propertyPrices[propertyType];

    var occupiedPrices = {
        "Yes": 50,
        "No": 0
    };
    totalPrice += occupiedPrices[occupied];

    var additionalRoomPrices = {
        "Living Room": 180,
        "Kitchen": 110,
        "Bathroom": 110,
        "Hallway": 150,
        "Stairwell & Landing": 140
    };
    if (additionalRooms) {
        for (var i = 0; i < additionalRooms.length; i++) {
            totalPrice += additionalRoomPrices[additionalRooms[i]];
        }
    }

    var numBedrooms = parseInt(bedrooms.charAt(0)) || 0;
    var numBathrooms = parseInt(bathrooms.charAt(0)) || 0;
    var ceilingCost = 80 * (numBedrooms + (additionalRooms ? additionalRooms.length : 0) + numBathrooms);
    var skirtingBoardCost = 40 * (numBedrooms + (additionalRooms ? additionalRooms.length : 0) + numBathrooms);
    var extraPaintingCosts = {
        "Ceiling": ceilingCost,
        "Skirting Board": skirtingBoardCost
    };
    if (extraPainting) {
        for (var j = 0; j < extraPainting.length; j++) {
            totalPrice += extraPaintingCosts[extraPainting[j]];
        }
    }

    totalPrice += 45 * parseInt(doors);

    totalPrice += 35 * parseInt(windows);

    var repairPrices = {
        "No repairs": 0,
        "small repairs": 50,
        "medium repairs": 110,
        "major repairs": 220
    };
    totalPrice += repairPrices[repairs];

    var congestionZonePrices = {
        "Yes": 15,
        "No": 0
    };
    totalPrice += congestionZonePrices[congestionZone];

    var parkingPrices = {
        "Yes": 0,
        "No": 15
    };
    totalPrice += parkingPrices[parkingAvailable];

    return totalPrice;
})()

Please note I’m not debugging your code, only analyzing the equation’s structure. If you need us to implement your equation, you can contact us directly through the plugin website. Contact Us

Thank you let me try that

Thank you Author!

Okay I got it working except for one last thing. Still fixing a few issues

This is the final code after hours trying to get it to work. So if anyone wants to use it for calculating trade work, they can.

(function(){
var baseAmount = 250;
var totalPrice = baseAmount;

// Get field values directly by their names and parse as needed
var bedrooms = parseFloat(fieldname16|v) || 0;
var bathrooms = parseFloat(fieldname47|v) || 0;
var propertyType = parseFloat(fieldname18|v) || 0;
var occupied = parseFloat(fieldname17|v) || 0;
var additionalRooms = fieldname20|v || [];
var extraPainting = fieldname21|v || [];
var doors = parseInt(fieldname25|v) || 0;
var windows = parseInt(fieldname29|v) || 0;
var repairs = parseFloat(fieldname22|v) || 0;
var congestionZone = parseFloat(fieldname44|v) || 0;
var parkingAvailable = parseFloat(fieldname45|v) || 0;

// Adjust bedroom cost
var bedroomCost = 0;
if (bedrooms == 300) {
    bedroomCost = 180;
} else {
    bedroomCost = bedrooms;
}

// Log field values to the console
console.log("Bedrooms: ", bedroomCost);
console.log("Bathrooms: ", bathrooms);
console.log("Property Type: ", propertyType);
console.log("Occupied: ", occupied);
console.log("Additional Rooms: ", additionalRooms);
console.log("Extra Painting: ", extraPainting);
console.log("Doors: ", doors);
console.log("Windows: ", windows);
console.log("Repairs: ", repairs);
console.log("Congestion Zone: ", congestionZone);
console.log("Parking Available: ", parkingAvailable);

/* Calculate bedrooms cost */
totalPrice += bedroomCost;

/* Calculate bathrooms cost */
totalPrice += bathrooms;

/* Calculate property type cost */
totalPrice += propertyType;

/* Calculate occupied cost */
totalPrice += occupied;

/* Calculate additional rooms cost */
if (additionalRooms.length > 0) {
    for (var i = 0; i < additionalRooms.length; i++) {
        totalPrice += parseFloat(additionalRooms[i]) || 0;
    }
}

/* Calculate extra painting cost */
var numBedrooms = bedroomCost ? 1 : 0;
var numBathrooms = bathrooms ? 1 : 0;
var numAdditionalRooms = additionalRooms.length;
var totalRooms = numBedrooms + numBathrooms + numAdditionalRooms;

// Adjust for ceiling and skirting board if no other rooms are selected
if (totalRooms === 0 && extraPainting.length > 0) {
    if (extraPainting.includes("80")) totalRooms += 1;
    if (extraPainting.includes("40")) totalRooms += 1;
}

var ceilingCost = 80 * totalRooms;
var skirtingBoardCost = 40 * totalRooms;

if (extraPainting.length > 0) {
    for (var j = 0; j < extraPainting.length; j++) {
        if (extraPainting[j] == "80") {
            totalPrice += ceilingCost;
        } else if (extraPainting[j] == "40") {
            totalPrice += skirtingBoardCost;
        }
    }
}

/* Calculate doors cost */
totalPrice += 45 * doors;

/* Calculate windows cost */
totalPrice += 35 * windows;

/* Calculate repairs cost */
totalPrice += repairs;

/* Calculate congestion zone cost */
totalPrice += congestionZone;

/* Calculate parking available cost */
totalPrice += parkingAvailable;

// Log the final total price
console.log("Total Price: ", totalPrice);

return totalPrice;

})()

How do I hide the numbers/hashtags symbols under phone number? I can’t seem to hide it without messing up that field. At the moment am using website phone number its not ideal

Hello @redfoxbuilders

There are some issues in your equation. I see you removed the plain objects that use the choices’ texts, also, you are using extra code for no reason. The equation would be much simpler.

First, you must understand the use of modifiers in the fields’ names. Radio buttons, Checkboxes, and Dropdown fields allow you to select the information to submit and include in the notification emails through their attributes “Value to submit” (the possible options are the choices’ texts or choices’ values). For these controls, you can use the |v modifier with their fields’ names to access the information to submit to the server Ex. fieldname16|v. If you want to access the choices’ values from the equations, use simply fieldname16.

If the radio buttons, checkboxes and dropdown fields do not have choices selected, the plugin treats their values as zero, you don’t need to include conditional operations or parseFloat.

So, the piece of code:

var bedrooms = parseFloat(fieldname16|v) || 0;
var bathrooms = parseFloat(fieldname47|v) || 0;
var propertyType = parseFloat(fieldname18|v) || 0;
var occupied = parseFloat(fieldname17|v) || 0;
var additionalRooms = fieldname20|v || [];
var extraPainting = fieldname21|v || [];
var doors = parseInt(fieldname25|v) || 0;
var windows = parseInt(fieldname29|v) || 0;
var repairs = parseFloat(fieldname22|v) || 0;
var congestionZone = parseFloat(fieldname44|v) || 0;
var parkingAvailable = parseFloat(fieldname45|v) || 0;

would be:

let bedrooms = fieldname16,
    bathrooms = fieldname47,
    propertyType = fieldname18,
    occupied = fieldname17,
    additionalRooms = fieldname20|v || [],
    extraPainting = fieldname21|v || [],
    doors = fieldname25,
    windows = fieldname29,
    repairs = fieldname22,
    congestionZone = fieldname44,
    parkingAvailable = fieldname45;

Now, about additionalRooms (fieldname20), and extraPainting (fieldname21)

Checkboxes include the “Merge ticked up options (sum or concatenation) or their values are returned as an array.” in their settings. If the checkbox is ticked, the plugin sums by itself the values of ticked choices, otherwise the field’s value would be an array with the values of ticked choices.

So, by unticking these choices in the fieldname20 and fieldname21, the lines of code:

   additionalRooms = fieldname20|v || [],
    extraPainting = fieldname21|v || [],

Would be only:

   additionalRooms = fieldname20,
    extraPainting = fieldname21|v,

The piece of code below is unnecessary:

if (additionalRooms.length > 0) {    
    for (var i = 0; i < additionalRooms.length; i++) {        
        totalPrice += parseFloat(additionalRooms[i]) || 0;    
    }
}

Using the plugin operations, the previous code can be rewritten as follows:

totalPrice += SUM(additionalRooms);

Something similar occurs with the code:

   if (extraPainting.includes("80")) totalRooms += 1;
    if (extraPainting.includes("40")) totalRooms += 1;

   totalRooms += IF(IN(80,extraPainting),1,0);
    totalRooms += IF(IN(40,extraPainting),1,0);

Concerning the #### symbols in the phone fields, their selector is #fbuilder .l and you can hide them via the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tabs. More information about customizing the form design by watching the following video:

https://youtu.be/acZC-fVh3y8

Best regards.

Hello @codepeople

Thank you for the great feedback, your coding definitley makes it easier to run. We had to code it the original way to handle the complex scenarios where ceilings and skirting boards can be selected either with or without room selections, to make sure the costs are calculated correctly. Since almost all rooms in the UK usually have skirting boards we had to times it by bedrooms, bathrooms, and the other areas of the property. However there is also the option that if a customer just wants to have their ceilings painted only and also only have their skirting boards painted they can chooses those options.

So the original drop down bedrooms, bathrooms, other rooms of the property only include prices for walls making it easier to split the cost calculator for other types of painting.

Our code also includes parsing to handle undefined or zero values, logging for easier debugging, specific adjustments for bedroom costs, and iterative calculations for dynamic pricing based on selected options. These features make sure the costs are calculated accurately and allows some flexibility

Please check the final build here, we are still working out the kinks

Instant Price Calculator Residential Painting and Decorating (redfoxbuilders.co.uk)

Your plugin is amazing and I can’t wait to spread it to more people!!

Hello @redfoxbuilders

Your form looks really good. Congratulations !!!. Thank you very much for sharing your form.

Best regards.